update

app/Http/Controllers/ProjectoDatacontroller.php

@@ -301,7 +301,6 @@ public function showAmbitDetailsProjectHistory($equipmentStatus, $projectID, $eq
             ->get();
 
 
-
         // Cria uma coleção para armazenar todas as tarefas, concluídas e não concluídas
         $receiveAllTasksHistiory = collect();
 
@@ -339,7 +338,6 @@ public function showAmbitDetailsProjectHistory($equipmentStatus, $projectID, $eq
                 $taskHistory->image_paths = [];
             }
 
-
             if (!is_null($taskHistory->entry_date) && !is_null($taskHistory->departure_date)) {
                 // Converte para instâncias de Carbon
                 $entryDate = \Carbon\Carbon::parse($taskHistory->entry_date);
@@ -372,8 +370,6 @@ public function showAmbitDetailsProjectHistory($equipmentStatus, $projectID, $eq
             $receiveAllTasksHistiory->push($taskHistory);
         }
 
-
-
         // Agrupa e ordena as tarefas concluídas por elemental_tasks_id e departure_date
         $receiveAllTasksHistiory = $receiveAllTasksHistiory->groupBy(function ($item) {
             return $item->elemental_tasks_id;
@@ -391,13 +387,6 @@ public function showAmbitDetailsProjectHistory($equipmentStatus, $projectID, $eq
             ];
         });
 
-        // ->map(function ($group) {
-        //     return [
-        //         'latest' => $group->sortByDesc('departure_date')->first(),
-        //         'history' => $group->sortByDesc('departure_date')->slice(1)->values()
-        //     ];
-        // });
-
         // Adiciona as tarefas não concluídas à coleção principal
         $incompleteTasks = $equipmentTasksIds->diff($completedTasksHistory->pluck('elemental_tasks_id'));
 
@@ -415,6 +404,8 @@ public function showAmbitDetailsProjectHistory($equipmentStatus, $projectID, $eq
                     'formatted_answers' => [],
                     'entry_date' => 'N/A',
                     'runtime' => 'N/A',
+                    'statusHistory' => 'N/A',
+                    'typeStatusHistory' => 'N/A',
                     'elementalTask' => (object) [
                         'elemental_tasks_code' => $elementalTask ? $elementalTask->elemental_tasks_code : null,
                         'elemental_tasks_description' => $elementalTask ? $elementalTask->elemental_tasks_description : null

app/Livewire/Execução/EquipmentsDashboard.php

@@ -83,7 +83,6 @@ public function showPercentageEquipments()
         ]);
     }
 
-
     public function refreshDataEquipments($datasProject)
     {
         // Inicializa a zero o contador para toda a vez que atualizar.
@@ -95,7 +94,7 @@ public function refreshDataEquipments($datasProject)
         $this->equivalentInProgress = 0;
         $this->equivalentUnstarted = 0;
 
-        //recebe o total de equipamentos da Obra.
+        // Recebe o total de equipamentos da Obra.
         $totalEquipments = EquipmentWorkHistory::where('company_projects_id', $datasProject->company_projects_id)->get();
 
         // Busca o valor total de todos os equipamentos encontrados
@@ -104,54 +103,56 @@ public function refreshDataEquipments($datasProject)
         $equipmentCounts = [];
 
         foreach ($totalEquipments as $equipment) {
-
+            // Conta quantas vezes o equipamento aparece em OrderEquipmentTasks
-            // Conta quantas vezes o equipamento aparece em OrderEquipmentTasks  - para saber o numero de tarefas que cada equipamento tem. (verificar se nao seria melhor colocar em um array)
             $tasksCount = OrderEquipmentTasks::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)->count();
 
-            
-            // ira receber varios dados para o array sendo array[key:equipment_id,valor:quantidade de vezes que o equipment_id se repete na tabela 'OrderEquipmentTasks']
             $equipmentCounts[$equipment->equipment_id] = $tasksCount;
 
-            // Verifica primiero se tem pelos menos o mesmo numeros de tarefas feitas em relacao a tarefas por fazer(apenas este metodo nao garante , pois nao distingue historico de tarefa distinta)
+            // Verifica se o equipamento está concluído
-            // Apenas apos a 2 verificacao quando equipment_status_project = 3 significa que foi apravado e concluido.
+            if (
-            if (ControlEquipmentWorkstation::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)
+                ControlEquipmentWorkstation::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)
-                    // apos receber ambos os numeros se as colunas 'entry_date' e 'departure_date' forem diferente de Null significa que o equipamento foi concluido   
-                    
                     ->whereNotNull('id_workstations')
                     ->whereNotNull('entry_date')
                     ->whereNotNull('departure_date')
                     ->count() >= $tasksCount
                 && EquipmentWorkHistory::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)
-                        ->where('equipment_status_project',3)
+                    ->where('equipment_status_project', 2)
+                    ->exists()
             ) {
-
-                // se o equipamento foi considerado concluido, conta +1 para o completed e o equivalentCompleted busca no array equipmentCounts, quando a key for igual ao equipment_id atual e conta com + os valores da key encontrada
                 $this->completed++;
-
-                $this->completed1[] = $equipment->equipment_id; // Adiciona o equipment_id ao array
-
                 $this->equivalentCompleted += $equipmentCounts[$equipment->equipment_id];
-            
             }
-            //Verica e devolve a quantidade de equipamentos para aprovar. 
+            // Verifica se o equipamento está para aprovar
-            //Ao tentar descomentar os graficos de queijo somem. 
+            elseif (
-            // elseif (EquipmentWorkHistory::where('equipmentWorkHistorys_id',$equipment->equipmentWorkHistorys_id)->where('equipment_status_project',2)){
+                EquipmentWorkHistory::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)
-            //     $this->toApprove++;
+                    ->where('equipment_status_project', 1)
-            // }
+                    ->exists()
-            
+            ) {
-            elseif (ControlEquipmentWorkstation::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)->exists()) {
+                $this->toApprove++;
+            }
+            // Verifica se o equipamento está em progresso
+            elseif (
+                ControlEquipmentWorkstation::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)
+                    ->exists()
+            ) {
                 $this->inProgress++;
                 $this->equivalentInProgress += $equipmentCounts[$equipment->equipment_id];
-            } else {
+            }
+            // Verifica se o equipamento está por iniciar
+            elseif (
+                EquipmentWorkHistory::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)
+                    ->where('equipment_status_project', 0)
+                    ->exists()
+                && !ControlEquipmentWorkstation::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)
+                    ->exists()
+            ) {
                 $this->unstarted++;
                 $this->equivalentUnstarted += $equipmentCounts[$equipment->equipment_id];
             }
         }
 
-        // Busca o valor total de todas as ocorrências criadas na variavel equipmentCounts
+        // Busca o valor total de todas as ocorrências criadas na variável equipmentCounts
         $this->totalEquivalentEquipment = array_sum($equipmentCounts);
-
-        $this->completed1 = collect($this->completed1);
     }
 
 

app/Livewire/Execução/TasksDashboard copy.php

@@ -0,0 +1,152 @@
+<?php
+
+namespace App\Livewire\Execução;
+
+use App\Models\EquipmentWorkHistory;
+use App\Models\OrderEquipmentTasks;
+use App\Models\ControlEquipmentWorkstation;
+use App\Models\ElementalTasks;
+
+use Livewire\Component;
+
+
+class TasksDashboard extends Component
+{
+    public $datasProject;
+    // protected $receiveTasksRepository;
+
+    public $receiveElementalTasks; // Recebe todas as acoes ja feitas atualmente por tarefa
+    public $receiveElementalTasksAll; // Recebe o total de tarefas que vamos fazer
+    public $countElementalTasksAll;
+    public $lastUpdated;
+
+    // Por enquanto nao ira usar, vamos deixar  
+    // public $receiveAllFurtherTasks;
+
+
+
+    // Deveria funcionar para receber o Repositorio. 
+    // public function initialize()
+    // {
+    //     // Injetar o repositório
+    //     $this->receiveTasksRepository = app(ReceiveTasksRepository::class);
+
+    //     // Agora você pode usar o repositório
+    //     $this->receiveElementalTasks = $this->receiveTasksRepository->getElementalTasks();
+    //     $this->receiveAllFurtherTasks = $this->receiveTasksRepository->getFurtherTasks();
+    // }
+
+    public function updateTimeGrafics()
+    {
+        // Data atual
+        $this->lastUpdated = now()->format('Y-m-d H:i');
+
+        // Chame o método para atualizar os dados dos gráficos
+        $this->refreshDataEquipments($this->datasProject);
+
+        // Disparar um evento com os dados atualizados
+        $this->dispatch('refreshData', [
+            'receiveElementalTasks' => $this->receiveElementalTasks,
+            'receiveElementalTasksAll' => $this->receiveElementalTasksAll,
+        ]);
+    }
+
+    // Graficos de porcentagem entre o valor atual de finalizadas com valor final de quantas faltam
+    public function showPercentageElementalTasks()
+    {
+        // Disparar um evento com os dados atualizados
+        $this->dispatch('refreshPercentageElementalTasks', [
+            'receiveElementalTasks' => $this->receiveElementalTasks,
+            'receiveElementalTasksAll' => $this->receiveElementalTasksAll,
+            'countElementalTasksAll' => $this->countElementalTasksAll
+        ]);
+    }
+
+    public function mount($datasProject)
+    {
+        $this->datasProject = $datasProject;
+
+        // Obter todos os equipamentos relacionados ao projeto
+        $receiveEquipmentsProject = EquipmentWorkHistory::where('company_projects_id', $datasProject->company_projects_id)->get();
+
+        $elementalTasks = collect();
+        // $furtherTasks = collect();
+
+        // Total de tarefas na Obra.
+        $elementalTasksCountsAll = [];
+
+        foreach ($receiveEquipmentsProject as $equipment) {
+            // Obter todas as OrderEquipmentTasks relacionadas a este equipamento
+            $relatedTasks = OrderEquipmentTasks::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)->get();
+
+            // Filtrar e armazenar os IDs únicos de elemental_tasks_id e further_tasks_id
+            $elementalTasks = $elementalTasks->merge($relatedTasks->whereNotNull('elemental_tasks_id')->pluck('elemental_tasks_id'))->unique();
+
+            // $furtherTasks = $furtherTasks->merge($relatedTasks->whereNotNull('further_tasks_id')->pluck('further_tasks_id'))->unique();
+            // Agrupar as tasks relacionadas por elemental_tasks_id e contar o número de ocorrências
+            $groupedTasks = $relatedTasks->whereNotNull('elemental_tasks_id')->groupBy('elemental_tasks_id');
+
+            foreach ($groupedTasks as $taskId => $tasksGroup) {
+                if (isset($elementalTasksCountsAll[$taskId])) {
+                    $elementalTasksCountsAll[$taskId] += count($tasksGroup);
+                } else {
+                    $elementalTasksCountsAll[$taskId] = count($tasksGroup);
+                }
+            }
+        }
+        //Neste ponto parece esta correto a quantidade de tarefas, pois nenhuma tarefa passa do maximo de equipamentos. 
+        $this->receiveElementalTasksAll = $elementalTasksCountsAll;
+
+        // Contar o número de ocorrências de cada ID na tabela ControlEquipmentWorkstation
+        // $furtherTasksCount1 = ControlEquipmentWorkstation::whereIn('further_tasks_id', $furtherTasks)->get()->countBy('further_tasks_id');
+
+        // Filtrar as associações de tarefas por equipmentWorkHistorys_id que são do projeto específico
+        $tasksCount = ControlEquipmentWorkstation::whereIn('elemental_tasks_id', $elementalTasks)
+            ->whereIn('equipmentWorkHistorys_id', $receiveEquipmentsProject->pluck('equipmentWorkHistorys_id')) // Garante que estamos contando apenas para o projeto específico
+            ->get(['equipmentWorkHistorys_id', 'elemental_tasks_id'])
+            ->groupBy('elemental_tasks_id')
+            ->map(function ($group) {
+                return $group->unique('equipmentWorkHistorys_id')->count();
+            });
+
+        $newArray = [];
+
+        foreach ($tasksCount as $taskId => $count) {
+            $task = ElementalTasks::find($taskId);
+            if ($task) {
+                $newArray[$task->elemental_tasks_code] = $count;
+            }
+        }
+
+        $this->receiveElementalTasks = $newArray;
+
+        $newArray1 = [];
+
+        foreach ($this->receiveElementalTasksAll as $taskId1 => $count) {
+            $task1 = ElementalTasks::find($taskId1);
+            if ($task1) {
+                $newArray1[$task1->elemental_tasks_code] = $count;
+            }
+        }
+
+        // Agora, $newArray contém a contagem de tasks por elemental_tasks_code
+        $this->receiveElementalTasksAll = $newArray1;
+
+
+        // Criar o contador para receber o valor total. 
+        $this->countElementalTasksAll = array_sum($this->receiveElementalTasksAll);
+
+
+        $this->lastUpdated = now()->format('Y-m-d H:i');
+    }
+
+
+    public function refreshDataEquipments($datasProject)
+    {
+    }
+
+    public function render()
+    {
+        return view('livewire.execução.tasks-dashboard');
+    }
+}

app/Livewire/Execução/TasksDashboard.php

@@ -2,92 +2,61 @@
 
 namespace App\Livewire\Execução;
 
-use App\Models\Equipment;
 use App\Models\EquipmentWorkHistory;
 use App\Models\OrderEquipmentTasks;
 use App\Models\ControlEquipmentWorkstation;
 use App\Models\ElementalTasks;
-
 use Livewire\Component;
 
-use App\Repositories\ReceiveTasksRepository;
-
 class TasksDashboard extends Component
 {
-    public $datasProject;
+    public $receiveElementalTasks;
-    // protected $receiveTasksRepository;
+    public $receiveElementalTasksAll;
-
-    public $receiveElementalTasks; // Recebe todas as acoes ja feitas atualmente por tarefa
-    public $receiveElementalTasksAll; // Recebe o total de tarefas que vamos fazer
-
-    public $countElementalTasks;
     public $countElementalTasksAll;
+
+    public $datasProject;
     public $lastUpdated;
 
-    // Por enquanto nao ira usar, vamos deixar  
-    // public $receiveAllFurtherTasks;
-
-
-
-    // Deveria funcionar para receber o Repositorio. 
-    // public function initialize()
-    // {
-    //     // Injetar o repositório
-    //     $this->receiveTasksRepository = app(ReceiveTasksRepository::class);
-
-    //     // Agora você pode usar o repositório
-    //     $this->receiveElementalTasks = $this->receiveTasksRepository->getElementalTasks();
-    //     $this->receiveAllFurtherTasks = $this->receiveTasksRepository->getFurtherTasks();
-    // }
-
-    public function updateTimeGrafics()
-    {
-        // Data atual
-        $this->lastUpdated = now()->format('Y-m-d H:i');
-
-        // Chame o método para atualizar os dados dos gráficos
-        $this->refreshDataEquipments($this->datasProject);
-
-        // Disparar um evento com os dados atualizados
-        $this->dispatch('refreshData', [
-            'receiveElementalTasks' => $this->receiveElementalTasks,
-            'receiveElementalTasksAll' => $this->receiveElementalTasksAll,
-        ]);
-    }
-
-    // Graficos de porcentagem entre o valor atual de finalizadas com valor final de quantas faltam
-    public function showPercentageElementalTasks()
-    {
-        // Disparar um evento com os dados atualizados
-        $this->dispatch('refreshPercentageElementalTasks', [
-            'receiveElementalTasks' => $this->receiveElementalTasks,
-            'receiveElementalTasksAll' => $this->receiveElementalTasksAll,
-            'countElementalTasksAll' => $this->countElementalTasksAll
-        ]);
-    }
-
     public function mount($datasProject)
     {
         $this->datasProject = $datasProject;
+        $this->lastUpdated = now()->format('Y-m-d H:i');
 
-        // Obter todos os equipamentos relacionados ao projeto
+        // chama a funcao e envia a variavel datasProject recebido da view principal
+        $this->refreshDataEquipments($datasProject);
+    }
+
+    public function refreshTaskGraph()
+    {
+        $this->lastUpdated = now()->format('Y-m-d H:i');
+
+        $this->refreshDataEquipments($this->datasProject);
+
+        $this->dispatch('refreshDataTasks', [
+            'receiveElementalTasks' => $this->receiveElementalTasks,
+            'receiveElementalTasksAll' => $this->receiveElementalTasksAll,
+        ]);
+    }
+
+    public function showPercentageElementalTasks()
+    {
+        $this->dispatch('refreshPercentageElementalTasks', [
+            'receiveElementalTasks' => $this->receiveElementalTasks,
+            'receiveElementalTasksAll' => $this->receiveElementalTasksAll,
+            'countElementalTasksAll' => $this->countElementalTasksAll,
+        ]);
+    }
+
+    public function refreshDataEquipments($datasProject)
+    {
         $receiveEquipmentsProject = EquipmentWorkHistory::where('company_projects_id', $datasProject->company_projects_id)->get();
 
         $elementalTasks = collect();
-        // $furtherTasks = collect();
-
-        // Total de tarefas na Obra.
         $elementalTasksCountsAll = [];
 
         foreach ($receiveEquipmentsProject as $equipment) {
-            // Obter todas as OrderEquipmentTasks relacionadas a este equipamento
             $relatedTasks = OrderEquipmentTasks::where('equipmentWorkHistorys_id', $equipment->equipmentWorkHistorys_id)->get();
-
-            // Filtrar e armazenar os IDs únicos de elemental_tasks_id e further_tasks_id
             $elementalTasks = $elementalTasks->merge($relatedTasks->whereNotNull('elemental_tasks_id')->pluck('elemental_tasks_id'))->unique();
-
-            // $furtherTasks = $furtherTasks->merge($relatedTasks->whereNotNull('further_tasks_id')->pluck('further_tasks_id'))->unique();
-            // Agrupar as tasks relacionadas por elemental_tasks_id e contar o número de ocorrências
             $groupedTasks = $relatedTasks->whereNotNull('elemental_tasks_id')->groupBy('elemental_tasks_id');
 
             foreach ($groupedTasks as $taskId => $tasksGroup) {
@@ -98,15 +67,10 @@ public function mount($datasProject)
                 }
             }
         }
-        //Neste ponto parece esta correto a quantidade de tarefas, pois nenhuma tarefa passa do maximo de equipamentos. 
+
         $this->receiveElementalTasksAll = $elementalTasksCountsAll;
-
-        // Contar o número de ocorrências de cada ID na tabela ControlEquipmentWorkstation
-        // $furtherTasksCount1 = ControlEquipmentWorkstation::whereIn('further_tasks_id', $furtherTasks)->get()->countBy('further_tasks_id');
-
-        // Filtrar as associações de tarefas por equipmentWorkHistorys_id que são do projeto específico
         $tasksCount = ControlEquipmentWorkstation::whereIn('elemental_tasks_id', $elementalTasks)
-            ->whereIn('equipmentWorkHistorys_id', $receiveEquipmentsProject->pluck('equipmentWorkHistorys_id')) // Garante que estamos contando apenas para o projeto específico
+            ->whereIn('equipmentWorkHistorys_id', $receiveEquipmentsProject->pluck('equipmentWorkHistorys_id'))
             ->get(['equipmentWorkHistorys_id', 'elemental_tasks_id'])
             ->groupBy('elemental_tasks_id')
             ->map(function ($group) {
@@ -114,39 +78,23 @@ public function mount($datasProject)
             });
 
         $newArray = [];
-
         foreach ($tasksCount as $taskId => $count) {
             $task = ElementalTasks::find($taskId);
             if ($task) {
                 $newArray[$task->elemental_tasks_code] = $count;
             }
         }
-
         $this->receiveElementalTasks = $newArray;
 
         $newArray1 = [];
-
         foreach ($this->receiveElementalTasksAll as $taskId1 => $count) {
             $task1 = ElementalTasks::find($taskId1);
             if ($task1) {
                 $newArray1[$task1->elemental_tasks_code] = $count;
             }
         }
-
-        // Agora, $newArray contém a contagem de tasks por elemental_tasks_code
         $this->receiveElementalTasksAll = $newArray1;
-
-
-        // Criar o contador para receber o valor total. 
         $this->countElementalTasksAll = array_sum($this->receiveElementalTasksAll);
-
-
-        $this->lastUpdated = now()->format('Y-m-d H:i');
-    }
-
-
-    public function refreshDataEquipments($datasProject)
-    {
     }
 
     public function render()

resources/views/components/pdf-layout.blade.php

@@ -127,7 +127,7 @@
             /* Aumente para dar mais espaço para o cabeçalho */
             margin-bottom: 50px;
             /* Espaço para o rodapé */
-            padding: 0 20px;
+            /* padding: 0 5px; */
         }
     </style>
 </head>
@@ -141,7 +141,7 @@
                 compact('tag', 'numeroPanini', 'nObra', 'ambito', 'projectLogoPath', 'companyLogoPath'))
         </header>
 
-        <div class="content">
+        <div>
             {{ $slot }}
         </div>
 

resources/views/livewire/execução/equipments-dashboard.blade.php

@@ -11,7 +11,8 @@
             <button class="btn btn-primary mb-2" wire:click="updateTimeGrafics">
                 <i class="fa-solid fa-arrows-rotate"></i>
             </button>
-            <div  style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
+            <div
+                style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
                 {{ $lastUpdated }}
             </div>
         </div>
@@ -51,29 +52,25 @@
                     'Total: ' + data.totalEquipmentsCount,
                     'Por Iniciar: ' + data.unstarted,
                     'Em Curso: ' + data.inProgress,
+                    'Por aprovar: ' + data.toApprove,
                     'Concluídos: ' + data.completed
                 ],
                 datasets: [{
-                    data: [null, data.unstarted, data.inProgress, data.completed],
+                    data: [null, data.unstarted, data.inProgress, data.toApprove, data
+                        .completed
+                    ],
                     backgroundColor: [
                         'rgba(0,80,0,0.5)', //green color
                         'rgb(9, 37, 92)', //Azul escuro ISPT
+                        'rgb(9, 100, 192)', //Azul escuro ISPT (Por aprovar)
                         'rgb(0, 176, 234)', // Azull Claro ISPT
                         'rgb(5, 107, 163)', // Azul parecido 
                     ],
-                    // borderColor: [
-                    //     '#FFFFFF', // Cor branca para o total (não será visível)
-                    //     'rgba(255, 99, 132, 1)',
-                    //     'rgba(54, 162, 235, 1)',
-                    //     'rgba(255, 206, 86, 1)'
-                    // ],
                     borderWidth: 1
                 }]
             },
             options: {
                 events: [],
-                // responsive: true,
-                // maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
             }
         });
 
@@ -102,19 +99,11 @@
                         'rgb(0, 176, 234)', // Azull Claro ISPT
                         'rgb(5, 107, 163)', // Azul parecido 
                     ],
-                    // borderColor: [
-                    //     'rgba(0,80,0,0.5)',
-                    //     'rgba(255, 99, 132, 1)',
-                    //     'rgba(54, 162, 235, 1)',
-                    //     'rgba(255, 206, 86, 1)'
-                    // ],
                     borderWidth: 1.
                 }]
             },
             options: {
                 events: [],
-                // responsive: true,
-                // maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
             }
         });
     });
@@ -127,6 +116,7 @@
     var unstarted = {{ $unstarted }};
     var inProgress = {{ $inProgress }};
     var completed = {{ $completed }};
+    var toApprove = {{ $toApprove }};
 
 
     // Crie um novo gráfico circular
@@ -137,39 +127,33 @@
                 'Total: ' + totalEquipmentsCount,
                 'Por Iniciar: ' + unstarted,
                 'Em Curso: ' + inProgress,
+                'Por aprovar: ' + toApprove,
                 'Concluídos: ' + completed
             ],
             datasets: [{
-                data: [null, unstarted, inProgress, completed],
+                data: [null, unstarted, inProgress, toApprove, completed],
                 backgroundColor: [
                     'rgba(0,80,0,0.5)', //green color
                     'rgb(9, 37, 92)', //Azul escuro ISPT
+                    'rgb(9, 100, 192)', //Azul escuro ISPT (Por aprovar)
                     'rgb(0, 176, 234)', // Azull Claro ISPT
                     'rgb(5, 107, 163)', // Azul parecido 
                 ],
-                // borderColor: [
-                //     '#FFFFFF', // Cor branca para o total (não será visível)
-                //     'rgba(255, 99, 132, 1)',
-                //     'rgba(54, 162, 235, 1)',
-                //     'rgba(255, 206, 86, 1)'
-                // ],
                 borderWidth: 1
             }]
         },
         options: {
             events: [],
-            // responsive: true,
-            // maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
         }
     });
 
     var grafico2 = document.getElementById('myPieChart1').getContext('2d');
 
     // Dados do componente Livewire
-    var totalEquivalentEquipment = {{ $totalEquivalentEquipment }}
+    var totalEquivalentEquipment = {{ $totalEquivalentEquipment }};
-    var equivalentUnstarted = {{ $equivalentUnstarted }}
+    var equivalentUnstarted = {{ $equivalentUnstarted }};
-    var equivalentInProgress = {{ $equivalentInProgress }}
+    var equivalentInProgress = {{ $equivalentInProgress }};
-    var equivalentCompleted = {{ $equivalentCompleted }}
+    var equivalentCompleted = {{ $equivalentCompleted }};
 
     var myPieChart1 = new Chart(grafico2, {
         type: 'doughnut',
@@ -181,21 +165,13 @@
                 'Concluídos: ' + equivalentCompleted
             ],
             datasets: [{
-                data: [null, equivalentUnstarted, equivalentInProgress,
+                data: [null, equivalentUnstarted, equivalentInProgress, equivalentCompleted],
-                    equivalentCompleted
-                ], // Dados do componente Livewire
                 backgroundColor: [
                     'rgba(0,80,0,0.5)', //green color
                     'rgb(9, 37, 92)', //Azul escuro ISPT
                     'rgb(0, 176, 234)', // Azull Claro ISPT
                     'rgb(5, 107, 163)', // Azul parecido 
                 ],
-                // borderColor: [
-                //     'rgba(0,80,0,0.5)',
-                //     'rgba(255, 99, 132, 1)',
-                //     'rgba(54, 162, 235, 1)',
-                //     'rgba(255, 206, 86, 1)'
-                // ],
                 borderWidth: 1
             }]
         },
@@ -205,6 +181,7 @@
     });
 </script>
 
+
 <script>
     window.addEventListener('refreshPercentageEquipments', event => {
         // Obter dados do evento
@@ -213,12 +190,12 @@
         // Calcular porcentagens
         var unstartedPercentage = ((data.unstarted / data.totalEquipmentsCount) * 100).toFixed(2);
         var inProgressPercentage = ((data.inProgress / data.totalEquipmentsCount) * 100).toFixed(2);
+        var toApprovePercentage = ((data.toApprove / data.totalEquipmentsCount) * 100).toFixed(2);
         var completedPercentage = ((data.completed / data.totalEquipmentsCount) * 100).toFixed(2);
 
 
         var totalEquivalentEquipmentPercentage = ((data.equivalentUnstarted / data.totalEquivalentEquipment) *
-            100).toFixed(
+            100).toFixed(2);
-            2);
         var equivalentInProgressPercentage = ((data.equivalentInProgress / data.totalEquivalentEquipment) * 100)
             .toFixed(2);
         var equivalentCompletedPercentage = ((data.equivalentCompleted / data.totalEquivalentEquipment) * 100)
@@ -238,13 +215,16 @@
                     'Total: ' + data.totalEquipmentsCount,
                     'Por Iniciar: ' + unstartedPercentage + '%',
                     'Em Curso: ' + inProgressPercentage + '%',
+                    'Por aprovar: ' + toApprovePercentage + '%',
                     'Concluídos: ' + completedPercentage + '%'
                 ],
                 datasets: [{
-                    data: [null, data.unstarted, data.inProgress, data.completed],
+                    data: [null, data.unstarted, data.inProgress, data.toApprove, data
+                        .completed],
                     backgroundColor: [
                         'rgba(0,80,0,0.5)', //green color
                         'rgb(9, 37, 92)', //Azul escuro ISPT
+                        'rgb(9, 100, 192)', //Azul escuro ISPT (Por aprovar)
                         'rgb(0, 176, 234)', // Azull Claro ISPT
                         'rgb(5, 107, 163)', // Azul parecido 
                     ],
@@ -255,6 +235,7 @@
                 events: [],
             }
         });
+
         if (myPieChart1) {
             myPieChart1.destroy(); // Destrua o gráfico antigo antes de criar um novo
         }
@@ -280,19 +261,11 @@
                         'rgb(0, 176, 234)', // Azull Claro ISPT
                         'rgb(5, 107, 163)', // Azul parecido 
                     ],
-                    // borderColor: [
-                    //     'rgba(0,80,0,0.5)',
-                    //     'rgba(255, 99, 132, 1)',
-                    //     'rgba(54, 162, 235, 1)',
-                    //     'rgba(255, 206, 86, 1)'
-                    // ],
                     borderWidth: 1.
                 }]
             },
             options: {
                 events: [],
-                // responsive: true,
-                // maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
             }
         });
 

resources/views/livewire/execução/tasks-dashboard.blade copy.php

@@ -0,0 +1,295 @@
+<div>
+    {{-- Proxima implementacao --}}
+    {{-- <div class="row">
+        <div class="col-sm">
+            <button wire:click="showPercentageElementalTasks">Grafico em porcentagem</button>
+        </div>
+    </div> --}}
+
+    {{-- Botao de fazer reload ao grafico sem recarregar a pagina , Atualmente nao funciona --}}
+    {{-- <div class="row">
+        <div class="col-sm d-flex justify-content-end">
+            <button class="btn btn-primary mb-2" wire:click="updateTimeGrafics">
+                <i class="fa-solid fa-arrows-rotate"></i>
+            </button>
+            <div
+                style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
+                {{ $lastUpdated }}
+            </div>
+        </div>
+    </div> --}}
+
+    {{-- <div class="row text-center">
+        <div class="col-sm-6">
+            <h6>Quantidade Tarefas Concluidas</h6>
+            <p style="color:gray; font-size:13px">Total de acções já realizadas de acordo com a tarefa.</p>
+            <canvas id="myPieChart2" width="50" height="50"></canvas>
+        </div>
+        <div class="col-sm-6">
+            <h6>Quantidade tarefas Acumuladas</h6>
+            <p style="color:gray; font-size:13px"> Total de acções a serem realizadas por tarefa.</p>
+            <canvas id="myPieChart3" width="50" height="50"></canvas>
+        </div>
+    </div>
+</div> --}}
+
+
+    <div class="row">
+        <div class="col-sm d-flex justify-content-end">
+            <button class="btn btn-primary mr-2 mb-2" wire:click="showPercentageEquipments">
+                <i class="fa-solid fa-percent"></i>
+            </button>
+            <button class="btn btn-primary mr-2 mb-2" wire:click="updateTimeGrafics">
+                <i class=" fa fa-bar-chart fa-rotate-270"></i>
+            </button>
+            <button class="btn btn-primary mb-2" wire:click="updateTimeGrafics">
+                <i class="fa-solid fa-arrows-rotate"></i>
+            </button>
+            <div
+                style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
+                {{ $lastUpdated }}
+            </div>
+        </div>
+    </div>
+
+
+    <div class="row text-center">
+        <div class="col-sm-12">
+            <h6>Quantidade Tarefas</h6>
+            <p style="color:gray; font-size:13px">Total de ações realizadas e a serem realizadas por tarefa.</p>
+            <canvas id="stackedBarChart" width="100" height="50"></canvas>
+        </div>
+    </div>
+
+
+    <script>
+        // Suponha que as variáveis abaixo estão corretamente definidas em PHP e passadas para o JavaScript
+        var elementalTasksCountAll = @json($receiveElementalTasksAll);
+        var elementalTasksCount = @json($receiveElementalTasks);
+
+        // Inicializa as variáveis para os dados concluídos e restantes
+        var dataConcluidas = [];
+        var dataRestantes = [];
+        var labels = Object.keys(elementalTasksCountAll);
+
+        // Preenche os arrays de dados
+        labels.forEach(function(label) {
+            // Se existir um valor para a label em 'elementalTasksCount', usa-o, caso contrário, usa 0
+            var valorConcluido = elementalTasksCount[label] || 0;
+            dataConcluidas.push(valorConcluido);
+
+            // Calcula o valor restante
+            var valorTotal = elementalTasksCountAll[label];
+            dataRestantes.push(valorTotal - valorConcluido);
+        });
+
+        // Elemento canvas onde o gráfico será renderizado
+        var canvas = document.getElementById('stackedBarChart').getContext('2d');
+
+        // Destrói o gráfico anterior se ele existir
+        if (window.stackedBarChartInstance) {
+            window.stackedBarChartInstance.destroy();
+        }
+
+        // Cria o gráfico de barras empilhadas
+        window.stackedBarChartInstance = new Chart(canvas, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Concluídas',
+                    data: dataConcluidas,
+                    backgroundColor: 'rgb(9,37,92)' // Cor para as concluídas
+                }, {
+                    label: 'Restantes',
+                    data: dataRestantes,
+                    backgroundColor: 'rgba(168,168,168)' // Cor para as restantes
+                }]
+            },
+            options: {
+                scales: {
+                    x: {
+                        stacked: true
+                    },
+                    y: {
+                        stacked: true
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: true
+                    },
+                    tooltip: {
+                        enabled: true
+                    }
+                }
+            }
+        });
+    </script>
+
+    <script>
+        window.addEventListener('refreshData', event => {
+            // Obter os dados detalhados do evento
+            var data = event.detail[0];
+            var elementalTasksCount = data.receiveElementalTasks;
+            var elementalTasksCountAll = data.receiveElementalTasksAll;
+
+            // Inicializa as variáveis para os dados concluídos e restantes
+            var dataConcluidas = [];
+            var dataRestantes = [];
+            var labels = Object.keys(elementalTasksCountAll);
+
+            // Preenche os arrays de dados
+            labels.forEach(function(label) {
+                // Se existir um valor para a label em 'elementalTasksCount', usa-o, caso contrário, usa 0
+                var valorConcluido = elementalTasksCount[label] || 0;
+                dataConcluidas.push(valorConcluido);
+
+                // Calcula o valor restante
+                var valorTotal = elementalTasksCountAll[label] || 0;
+                dataRestantes.push(valorTotal - valorConcluido);
+            });
+
+            // Elemento canvas onde o gráfico será renderizado
+            var canvas = document.getElementById('stackedBarChart').getContext('2d');
+
+            // Destrói o gráfico anterior se ele existir
+            if (window.stackedBarChartInstance) {
+                window.stackedBarChartInstance.destroy();
+            }
+
+            // Cria o gráfico de barras empilhadas com os novos dados
+            window.stackedBarChartInstance = new Chart(canvas, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Concluídas',
+                        data: dataConcluidas,
+                        backgroundColor: 'rgb(9,37,92)' // Cor para as concluídas
+                    }, {
+                        label: 'Restantes',
+                        data: dataRestantes,
+                        backgroundColor: 'rgba(168,168,168)' // Cor para as restantes
+                    }]
+                },
+                options: {
+                    scales: {
+                        x: {
+                            stacked: true
+                        },
+                        y: {
+                            stacked: true
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: true
+                        },
+                        tooltip: {
+                            enabled: true
+                        }
+                    }
+                }
+            });
+        });
+    </script>
+
+
+
+
+
+
+    {{-- Scrip de atualizacao da tabela --}}
+    {{-- <script>
+        window.addEventListener('refreshData', event => {
+
+            var data = event.detail[0];
+            var elementalTasksCount = data.receiveElementalTasks;
+
+            var labels = Object.keys(elementalTasksCount);
+            var dataValues = Object.values(elementalTasksCount);
+
+            var baseColors = [
+                'rgb(117,210,240)', //green color
+                'rgb(9, 37, 92)', //Azul escuro ISPT
+                'rgb(0, 176, 234)', // Azull Claro ISPT
+                'rgb(5, 107, 163)', // Azul parecido 
+            ];
+
+            // Atribuir cores aos dados de forma cíclica
+            var backgroundColors = dataValues.map((_, index) => baseColors[index % baseColors.length]);
+
+            var grafico2 = document.getElementById('myPieChart2').getContext('2d');
+
+            window.myPieChart2 = new Chart(grafico2, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        data: dataValues,
+                        backgroundColor: backgroundColors, // Usar o array de cores gerado
+                        borderColor: backgroundColors.map(color => color.replace('0.5',
+                            '1')), // Ajustar a opacidade para as bordas
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    animation: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            enabled: false
+                        }
+                    }
+                },
+            });
+
+            var elementalTasksCountAll = data.receiveElementalTasksAll;
+
+
+
+            var labelsTasksCountAll = Object.keys(elementalTasksCountAll);
+            var dataValuesTasksCountAll = Object.values(elementalTasksCountAll);
+
+            var grafico3 = document.getElementById('myPieChart3').getContext('2d');
+
+            window.myPieChart3 = new Chart(grafico3, {
+                type: 'bar',
+                data: {
+                    labels: labelsTasksCountAll,
+                    datasets: [{
+                        data: dataValuesTasksCountAll,
+                        backgroundColor: backgroundColors, // Usar o array de cores gerado
+                        borderColor: backgroundColors.map(color => color.replace('0.5',
+                            '1')), // Ajustar a opacidade para as bordas
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    animation: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            enabled: false
+                        }
+                    }
+                },
+            });
+        });
+    </script> --}}
+
+    {{-- Script de Gradico em porcentagem , para proxima implementacao e ADD+ Esforco   --}}
+    {{-- <script>
+    window.addEventListener('refreshPercentageElementalTasks', event => {
+        var data = event.detail[0];
+        // Tarefas ja feitas
+        if (myPieChart2) {
+            myPieChart2.destroy(); // Destrua o gráfico antigo antes de criar um novo
+        }
+    });
+</script> --}}

resources/views/livewire/execução/tasks-dashboard.blade.php

@@ -1,145 +1,55 @@
-<div>
+{{-- <div>
-    {{-- Proxima implementacao --}}
+    <div class="row">
-    {{-- <div class="row">
-        <div class="col-sm">
-            <button wire:click="showPercentageElementalTasks">Grafico em porcentagem</button>
-        </div>
-    </div> --}}
-
-    {{-- Botao de fazer reload ao grafico sem recarregar a pagina , Atualmente nao funciona --}}
-    {{-- <div class="row">
         <div class="col-sm d-flex justify-content-end">
-            <button class="btn btn-primary mb-2" wire:click="updateTimeGrafics">
+            <button class="btn btn-primary mr-2 mb-2" wire:click="showPercentageElementalTasks">
+                <i class="fa-solid fa-percent"></i>
+            </button>
+            <button class="btn btn-primary mr-2 mb-2" wire:click="refreshTaskGraph">
+                <i class="fa fa-bar-chart fa-rotate-270"></i>
+            </button>
+            <button class="btn btn-primary mb-2" wire:click="refreshTaskGraph">
                 <i class="fa-solid fa-arrows-rotate"></i>
             </button>
-            <div
+            <div style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
-                style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
                 {{ $lastUpdated }}
             </div>
         </div>
-    </div> --}}
-
-    {{-- <div class="row text-center">
-        <div class="col-sm-6">
-            <h6>Quantidade Tarefas Concluidas</h6>
-            <p style="color:gray; font-size:13px">Total de acções já realizadas de acordo com a tarefa.</p>
-            <canvas id="myPieChart2" width="50" height="50"></canvas>
     </div>
-        <div class="col-sm-6">
-            <h6>Quantidade tarefas Acumuladas</h6>
-            <p style="color:gray; font-size:13px"> Total de acções a serem realizadas por tarefa.</p>
-            <canvas id="myPieChart3" width="50" height="50"></canvas>
-        </div>
-    </div>
-</div> --}}
-
 
     <div class="row text-center">
         <div class="col-sm-12">
             <h6>Quantidade Tarefas</h6>
             <p style="color:gray; font-size:13px">Total de ações realizadas e a serem realizadas por tarefa.</p>
-            <canvas id="stackedBarChart" width="100" height="50"></canvas>
+            <canvas id="stackedBarChart" width="800" height="400"></canvas>
         </div>
     </div>
+</div> --}}
 
 
-    <script>
+{{-- <script>
-        // Suponha que as variáveis abaixo estão corretamente definidas em PHP e passadas para o JavaScript
+    // Atualização do gráfico quando os dados são atualizados via Livewire
-        var elementalTasksCountAll = @json($receiveElementalTasksAll);
+    window.addEventListener('refreshDataTasks', event => {
-        var elementalTasksCount = @json($receiveElementalTasks);
-
-        // Inicializa as variáveis para os dados concluídos e restantes
-        var dataConcluidas = [];
-        var dataRestantes = [];
-        var labels = Object.keys(elementalTasksCountAll);
-
-        // Preenche os arrays de dados
-        labels.forEach(function(label) {
-            // Se existir um valor para a label em 'elementalTasksCount', usa-o, caso contrário, usa 0
-            var valorConcluido = elementalTasksCount[label] || 0;
-            dataConcluidas.push(valorConcluido);
-
-            // Calcula o valor restante
-            var valorTotal = elementalTasksCountAll[label];
-            dataRestantes.push(valorTotal - valorConcluido);
-        });
-
-        // Elemento canvas onde o gráfico será renderizado
-        var canvas = document.getElementById('stackedBarChart').getContext('2d');
-
-        // Destrói o gráfico anterior se ele existir
-        if (window.stackedBarChartInstance) {
-            window.stackedBarChartInstance.destroy();
-        }
-
-        // Cria o gráfico de barras empilhadas
-        window.stackedBarChartInstance = new Chart(canvas, {
-            type: 'bar',
-            data: {
-                labels: labels,
-                datasets: [{
-                    label: 'Concluídas',
-                    data: dataConcluidas,
-                    backgroundColor: 'rgb(9,37,92)' // Cor para as concluídas
-                }, {
-                    label: 'Restantes',
-                    data: dataRestantes,
-                    backgroundColor: 'rgba(168,168,168)' // Cor para as restantes
-                }]
-            },
-            options: {
-                scales: {
-                    x: {
-                        stacked: true
-                    },
-                    y: {
-                        stacked: true
-                    }
-                },
-                plugins: {
-                    legend: {
-                        display: true
-                    },
-                    tooltip: {
-                        enabled: true
-                    }
-                }
-            }
-        });
-    </script>
-
-    <script>
-        window.addEventListener('refreshData', event => {
-            // Obter os dados detalhados do evento
         var data = event.detail[0];
         var elementalTasksCount = data.receiveElementalTasks;
         var elementalTasksCountAll = data.receiveElementalTasksAll;
 
-            // Inicializa as variáveis para os dados concluídos e restantes
         var dataConcluidas = [];
         var dataRestantes = [];
         var labels = Object.keys(elementalTasksCountAll);
 
-            // Preenche os arrays de dados
         labels.forEach(function(label) {
-                // Se existir um valor para a label em 'elementalTasksCount', usa-o, caso contrário, usa 0
             var valorConcluido = elementalTasksCount[label] || 0;
             dataConcluidas.push(valorConcluido);
-
-                // Calcula o valor restante
             var valorTotal = elementalTasksCountAll[label] || 0;
             dataRestantes.push(valorTotal - valorConcluido);
         });
 
-            // Elemento canvas onde o gráfico será renderizado
         var canvas = document.getElementById('stackedBarChart').getContext('2d');
 
-            // Destrói o gráfico anterior se ele existir
         if (window.stackedBarChartInstance) {
             window.stackedBarChartInstance.destroy();
         }
 
-            // Cria o gráfico de barras empilhadas com os novos dados
         window.stackedBarChartInstance = new Chart(canvas, {
             type: 'bar',
             data: {
@@ -147,11 +57,11 @@
                 datasets: [{
                     label: 'Concluídas',
                     data: dataConcluidas,
-                        backgroundColor: 'rgb(9,37,92)' // Cor para as concluídas
+                    backgroundColor: 'rgb(9,37,92)'
                 }, {
                     label: 'Restantes',
                     data: dataRestantes,
-                        backgroundColor: 'rgba(168,168,168)' // Cor para as restantes
+                    backgroundColor: 'rgba(168,168,168)'
                 }]
             },
             options: {
@@ -174,103 +84,216 @@
             }
         });
     });
-    </script>
 
+    // Função para inicializar o gráfico pela primeira vez
+    function initializeChart() {
+        var elementalTasksCountAll = @json($receiveElementalTasksAll);
+        var elementalTasksCount = @json($receiveElementalTasks);
 
+        var dataConcluidas = [];
+        var dataRestantes = [];
+        var labels = Object.keys(elementalTasksCountAll);
 
+        labels.forEach(function(label) {
+            var valorConcluido = elementalTasksCount[label] || 0;
+            dataConcluidas.push(valorConcluido);
+            var valorTotal = elementalTasksCountAll[label];
+            dataRestantes.push(valorTotal - valorConcluido);
+        });
 
+        var canvas = document.getElementById('stackedBarChart').getContext('2d');
 
+        if (window.stackedBarChartInstance) {
+            window.stackedBarChartInstance.destroy();
+        }
 
-    {{-- Scrip de atualizacao da tabela --}}
+        window.stackedBarChartInstance = new Chart(canvas, {
-    {{-- <script>
-        window.addEventListener('refreshData', event => {
-
-            var data = event.detail[0];
-            var elementalTasksCount = data.receiveElementalTasks;
-
-            var labels = Object.keys(elementalTasksCount);
-            var dataValues = Object.values(elementalTasksCount);
-
-            var baseColors = [
-                'rgb(117,210,240)', //green color
-                'rgb(9, 37, 92)', //Azul escuro ISPT
-                'rgb(0, 176, 234)', // Azull Claro ISPT
-                'rgb(5, 107, 163)', // Azul parecido 
-            ];
-
-            // Atribuir cores aos dados de forma cíclica
-            var backgroundColors = dataValues.map((_, index) => baseColors[index % baseColors.length]);
-
-            var grafico2 = document.getElementById('myPieChart2').getContext('2d');
-
-            window.myPieChart2 = new Chart(grafico2, {
             type: 'bar',
             data: {
                 labels: labels,
                 datasets: [{
-                        data: dataValues,
+                    label: 'Concluídas',
-                        backgroundColor: backgroundColors, // Usar o array de cores gerado
+                    data: dataConcluidas,
-                        borderColor: backgroundColors.map(color => color.replace('0.5',
+                    backgroundColor: 'rgb(9,37,92)'
-                            '1')), // Ajustar a opacidade para as bordas
+                }, {
-                        borderWidth: 1
+                    label: 'Restantes',
+                    data: dataRestantes,
+                    backgroundColor: 'rgba(168,168,168)'
                 }]
             },
             options: {
-                    animation: false,
+                scales: {
+                    x: {
+                        stacked: true
+                    },
+                    y: {
+                        stacked: true
+                    }
+                },
                 plugins: {
                     legend: {
-                            display: false
+                        display: true
                     },
                     tooltip: {
-                            enabled: false
+                        enabled: true
+                    }
                 }
             }
-                },
         });
+    }
 
+    // Inicialização inicial do gráfico
+    initializeChart();
+</script> --}}
+
+<div>
+    <div class="row">
+        <div class="col-sm d-flex justify-content-end">
+            <button class="btn btn-primary mr-2 mb-2" wire:click="showPercentageElementalTasks">
+                <i class="fa-solid fa-arrows-rotate"></i>
+                {{-- <i class="fa-solid fa-percent"></i> --}}
+            </button>
+            {{-- <button class="btn btn-primary mr-2 mb-2" wire:click="refreshTaskGraph">
+                <i class="fa fa-bar-chart fa-rotate-270"></i>
+            </button>
+            <button class="btn btn-primary mb-2" wire:click="refreshTaskGraph">
+                <i class="fa-solid fa-arrows-rotate"></i>
+            </button> --}}
+            <div
+                style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
+                {{ $lastUpdated }}
+            </div>
+        </div>
+    </div>
+
+    <div class="row text-center">
+        <div class="col-sm-12">
+            <h6>Quantidade Tarefas</h6>
+            <p style="color:gray; font-size:13px">Total de ações realizadas e a serem realizadas por tarefa.</p>
+            <canvas id="stackedBarChart" width="800" height="400"></canvas>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    // Atualização do gráfico quando os dados são atualizados via Livewire
+    window.addEventListener('refreshDataTasks', event => {
+        var data = event.detail[0];
+        var elementalTasksCount = data.receiveElementalTasks;
         var elementalTasksCountAll = data.receiveElementalTasksAll;
 
+        var dataConcluidas = [];
+        var dataRestantes = [];
+        var labels = Object.keys(elementalTasksCountAll);
 
+        labels.forEach(function(label) {
+            var valorConcluido = elementalTasksCount[label] || 0;
+            dataConcluidas.push(valorConcluido);
+            var valorTotal = elementalTasksCountAll[label] || 0;
+            dataRestantes.push(valorTotal - valorConcluido);
+        });
 
-            var labelsTasksCountAll = Object.keys(elementalTasksCountAll);
+        var canvas = document.getElementById('stackedBarChart').getContext('2d');
-            var dataValuesTasksCountAll = Object.values(elementalTasksCountAll);
 
-            var grafico3 = document.getElementById('myPieChart3').getContext('2d');
+        if (window.stackedBarChartInstance) {
+            window.stackedBarChartInstance.destroy();
+        }
 
-            window.myPieChart3 = new Chart(grafico3, {
+        window.stackedBarChartInstance = new Chart(canvas, {
             type: 'bar',
             data: {
-                    labels: labelsTasksCountAll,
+                labels: labels,
                 datasets: [{
-                        data: dataValuesTasksCountAll,
+                    label: 'Concluídas',
-                        backgroundColor: backgroundColors, // Usar o array de cores gerado
+                    data: dataConcluidas,
-                        borderColor: backgroundColors.map(color => color.replace('0.5',
+                    backgroundColor: 'rgb(9,37,92)'
-                            '1')), // Ajustar a opacidade para as bordas
+                }, {
-                        borderWidth: 1
+                    label: 'Restantes',
+                    data: dataRestantes,
+                    backgroundColor: 'rgba(168,168,168)'
                 }]
             },
             options: {
-                    animation: false,
+                scales: {
+                    x: {
+                        stacked: true
+                    },
+                    y: {
+                        stacked: true
+                    }
+                },
                 plugins: {
                     legend: {
-                            display: false
+                        display: true
                     },
                     tooltip: {
-                            enabled: false
+                        enabled: true
                     }
                 }
+            }
+        });
+    });
+
+    // Função para inicializar o gráfico pela primeira vez
+    function initializeChart() {
+        var elementalTasksCountAll = @json($receiveElementalTasksAll);
+        var elementalTasksCount = @json($receiveElementalTasks);
+
+        var dataConcluidas = [];
+        var dataRestantes = [];
+        var labels = Object.keys(elementalTasksCountAll);
+
+        labels.forEach(function(label) {
+            var valorConcluido = elementalTasksCount[label] || 0;
+            dataConcluidas.push(valorConcluido);
+            var valorTotal = elementalTasksCountAll[label];
+            dataRestantes.push(valorTotal - valorConcluido);
+        });
+
+        var canvas = document.getElementById('stackedBarChart').getContext('2d');
+
+        if (window.stackedBarChartInstance) {
+            window.stackedBarChartInstance.destroy();
+        }
+
+        window.stackedBarChartInstance = new Chart(canvas, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Concluídas',
+                    data: dataConcluidas,
+                    backgroundColor: 'rgb(9,37,92)'
+                }, {
+                    label: 'Restantes',
+                    data: dataRestantes,
+                    backgroundColor: 'rgba(168,168,168)'
+                }]
+            },
+            options: {
+                scales: {
+                    x: {
+                        stacked: true
+                    },
+                    y: {
+                        stacked: true
+                    }
                 },
-            });
+                plugins: {
-        });
+                    legend: {
-    </script> --}}
+                        display: true
-
+                    },
-    {{-- Script de Gradico em porcentagem , para proxima implementacao e ADD+ Esforco   --}}
+                    tooltip: {
-    {{-- <script>
+                        enabled: true
-    window.addEventListener('refreshPercentageElementalTasks', event => {
+                    }
-        var data = event.detail[0];
+                }
-        // Tarefas ja feitas
-        if (myPieChart2) {
-            myPieChart2.destroy(); // Destrua o gráfico antigo antes de criar um novo
             }
         });
-</script> --}}
+    }
+
+    // Inicialização inicial do gráfico
+    initializeChart();
+</script>
+
+

resources/views/projectsClients/pdf/testePdf.blade.php

@@ -55,7 +55,8 @@
                     compact('tag', 'numeroPanini', 'nObra', 'ambito', 'projectLogoPath', 'companyLogoPath'))
             </header>
 
-            <div class="content">
+            <div class="content mr-4">
+                {{-- <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quas eligendi pariatur eum alias, aliquam distinctio cumque ut corporis. Vero illo omnis rem eligendi laudantium sunt? Autem dolores alias officiis.</h1> --}}
                 @include('components.elemental-tasks', ['task_todo' => $task_todo])
                 <br>
                 <br>

resources/views/projectsClients/showAmbitDetailProjectHistory.blade.php

@@ -151,12 +151,15 @@ class="fas fa-plus"></i></button>
                             @php
                                 $task_todo = $tasks['latest'];
                             @endphp
+
                             @include('components.elemental-tasks', ['task_todo' => $task_todo])
+                            
                         @endif
                     @endforeach
 
+                    {{-- ESTA modal recebe corretamento os historicos para cada tarefa ja executada, porem a questao e que da forma que esta atualmente se tirar de comentario, os valores do tipo radio simplemente não aparecem --}}
                     <!-- Modal --> 
-                    <div class="modal fade" id="taskModal" tabindex="-1" role="dialog" aria-labelledby="taskModalLabel"
+                    {{-- <div class="modal fade" id="taskModal" tabindex="-1" role="dialog" aria-labelledby="taskModalLabel"
                         aria-hidden="true">
                         <div class="modal-dialog modal-xl" role="document">
                             <div class="modal-content">
@@ -187,12 +190,20 @@ class="fas fa-plus"></i></button>
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </div>  --}}
 
                 </div>
                 <!-- ./card-body -->
 
 
+               
+
+
+                
+
+
+
+
             </div>
             <!-- ./card card-primary -->