From 5b0783f36b2457c7eb2b540a152e43e9fe0e213b Mon Sep 17 00:00:00 2001
From: NANDO9322 <andre.fr93@gmail.com>
Date: Fri, 16 Jan 2026 18:37:00 -0300
Subject: [PATCH] fix: (agenda) descricao melhorada para titulo das colunas da
 listagem dos eventos

---
 frontend/components/EventTable.tsx | 24 ++++----
 frontend/pages/Finance.tsx         | 96 +++++++++++++++++++-----------
 2 files changed, 74 insertions(+), 46 deletions(-)

diff --git a/frontend/components/EventTable.tsx b/frontend/components/EventTable.tsx
index 7624685..e530175 100644
--- a/frontend/components/EventTable.tsx
+++ b/frontend/components/EventTable.tsx
@@ -408,40 +408,40 @@ export const EventTable: React.FC<EventTableProps> = ({
               {/* Novas colunas de gestão de equipe */}
               {(userRole === UserRole.BUSINESS_OWNER || userRole === UserRole.SUPERADMIN) && (
                 <>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Quantidade de Formandos">
                     QTD Form.
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Quantidade de Fotógrafos">
                     Fotóg.
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Quantidade de Recepcionistas">
                     Recep.
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Quantidade de Cinegrafistas">
                     Cine.
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Quantidade de Estúdios">
                     Estúd.
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Pontos de Foto">
                     Pts. Foto
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Pontos Decorados">
                     Pts. Dec.
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Pontos de LED">
                     Pts. LED
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Profissionais Confirmados?">
                     Prof. OK?
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Fotógrafos Faltantes/Pendentes">
                     Fot. Falt.
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Recepcionistas Faltantes/Pendentes">
                     Rec. Falt.
                   </th>
-                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th className="px-3 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider" title="Cinegrafistas Faltantes/Pendentes">
                     Cin. Falt.
                   </th>
                 </>
diff --git a/frontend/pages/Finance.tsx b/frontend/pages/Finance.tsx
index 0fcada6..bcf8d56 100644
--- a/frontend/pages/Finance.tsx
+++ b/frontend/pages/Finance.tsx
@@ -440,11 +440,16 @@ const Finance: React.FC = () => {
                     anoFormatura: data.ano_formatura_label || "",
                     fot: data.fot,
                 }));
+                // Update the search query state too
+                setFotQuery(String(data.fot));
                 setFotFound(true);
             }
         } catch (err) {
             console.error("Error fetching FOT details for edit:", err);
         }
+    } else if (t.fot) {
+        // Fallback if no ID but we have the number
+        setFotQuery(String(t.fot));
     }
 
     // Fetch professional functions if professional name is present
@@ -608,41 +613,64 @@ const Finance: React.FC = () => {
                   <tbody className="divide-y relative">
                       {sortedTransactions.map((t, index) => {
                           const isNewFot = index > 0 && t.fot !== sortedTransactions[index - 1].fot;
+                          
+                          // Check if this is the last item of the group (or list) to show summary
+                          const isLastOfGroup = index === sortedTransactions.length - 1 || t.fot !== sortedTransactions[index + 1].fot;
+                          // Only show summary if sorted by default (which groups by FOT) or explicitly sorted by FOT
+                          const showSummary = isLastOfGroup && (!sortConfig || sortConfig.key === 'fot');
+                          
                           return (
-                          <tr key={t.id} 
-                            className={`hover:bg-gray-50 cursor-pointer ${isNewFot ? "border-t-[3px] border-gray-400" : ""}`} 
-                            onClick={() => handleEdit(t)}
-                          >
-                             <td className="px-3 py-2 font-bold">{t.fot || "?"}</td>
-                             <td className="px-3 py-2">{t.data}</td>
-                             <td className="px-3 py-2">{t.tipoEvento}</td>
-                             <td className="px-3 py-2">{t.tipoServico}</td>
-                             <td className="px-3 py-2">{t.nome}</td>
-                             <td className="px-3 py-2">{t.whatsapp}</td>
-                             <td className="px-3 py-2">{t.cpf}</td>
-                             <td className="px-3 py-2">{t.tabelaFree}</td>
-                             <td className="px-3 py-2 text-right">{t.valorFree?.toFixed(2)}</td>
-                             <td className="px-3 py-2 text-right">{t.valorExtra?.toFixed(2)}</td>
-                             <td className="px-3 py-2 max-w-[150px] truncate" title={t.descricaoExtra}>{t.descricaoExtra}</td>
-                             <td className="px-3 py-2 text-right font-bold text-green-700">{t.totalPagar?.toFixed(2)}</td>
-                              <td className="px-3 py-2">
-                                  {(() => {
-                                    try {
-                                      if (!t.dataPgto) return "-";
-                                      const d = new Date(t.dataPgto);
-                                      if (isNaN(d.getTime())) return "-";
-                                      return d.toLocaleDateString("pt-BR", {timeZone: "UTC"});
-                                    } catch (e) {
-                                      return "-";
-                                    }
-                                  })()}
-                              </td>
-                              <td className="px-3 py-2 text-center">
-                                  {t.pgtoOk 
-                                    ? <span className="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-[10px]">Sim</span> 
-                                    : <span className="bg-red-100 text-red-800 px-2 py-0.5 rounded-full text-[10px]">Não</span>}
-                              </td>
-                         </tr>
+                          <React.Fragment key={t.id}>
+                            <tr 
+                                className={`hover:bg-gray-50 cursor-pointer ${isNewFot ? "border-t-[3px] border-gray-400" : ""}`} 
+                                onClick={() => handleEdit(t)}
+                            >
+                                <td className="px-3 py-2 font-bold">{t.fot || "?"}</td>
+                                <td className="px-3 py-2">{t.data}</td>
+                                <td className="px-3 py-2">{t.tipoEvento}</td>
+                                <td className="px-3 py-2">{t.tipoServico}</td>
+                                <td className="px-3 py-2">{t.nome}</td>
+                                <td className="px-3 py-2">{t.whatsapp}</td>
+                                <td className="px-3 py-2">{t.cpf}</td>
+                                <td className="px-3 py-2">{t.tabelaFree}</td>
+                                <td className="px-3 py-2 text-right">{t.valorFree?.toFixed(2)}</td>
+                                <td className="px-3 py-2 text-right">{t.valorExtra?.toFixed(2)}</td>
+                                <td className="px-3 py-2 max-w-[150px] truncate" title={t.descricaoExtra}>{t.descricaoExtra}</td>
+                                <td className="px-3 py-2 text-right font-bold text-green-700">{t.totalPagar?.toFixed(2)}</td>
+                                <td className="px-3 py-2">
+                                    {(() => {
+                                        try {
+                                        if (!t.dataPgto) return "-";
+                                        const d = new Date(t.dataPgto);
+                                        if (isNaN(d.getTime())) return "-";
+                                        return d.toLocaleDateString("pt-BR", {timeZone: "UTC"});
+                                        } catch (e) {
+                                        return "-";
+                                        }
+                                    })()}
+                                </td>
+                                <td className="px-3 py-2 text-center">
+                                    {t.pgtoOk 
+                                        ? <span className="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-[10px]">Sim</span> 
+                                        : <span className="bg-red-100 text-red-800 px-2 py-0.5 rounded-full text-[10px]">Não</span>}
+                                </td>
+                            </tr>
+                            {showSummary && (
+                                <tr className="bg-gray-100 font-bold text-gray-800 border-b-2 border-gray-300">
+                                    <td colSpan={11} className="px-3 py-2 text-right uppercase text-[10px] tracking-wide text-gray-500">
+                                        Total FOT {t.fot}:
+                                    </td>
+                                    <td className="px-3 py-2 text-right text-brand-gold">
+                                        {/* Calculate sum for this group */}
+                                        {sortedTransactions
+                                            .filter(tr => tr.fot === t.fot)
+                                            .reduce((sum, curr) => sum + (curr.totalPagar || 0), 0)
+                                            .toFixed(2)}
+                                    </td>
+                                    <td colSpan={2}></td>
+                                </tr>
+                            )}
+                          </React.Fragment>
                         );
                      })}
                  </tbody>