From de6b3bb41049ecf01d019681516a96b797e1844a Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 5 Nov 2024 13:36:07 +0100
Subject: [PATCH 01/36] fix: layout and font size

---
 src/pages/my-community/MyCommunityPage.tsx | 3 +--
 src/themed/text/Text.tsx                   | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/my-community/MyCommunityPage.tsx b/src/pages/my-community/MyCommunityPage.tsx
index a91bce5..2b69769 100644
--- a/src/pages/my-community/MyCommunityPage.tsx
+++ b/src/pages/my-community/MyCommunityPage.tsx
@@ -18,9 +18,8 @@ const LookerStudioEmbed = () => {
     <iframe
       title="Looker Studio Report"
       width="100%"
-      height="1000"
+      height="700"
       src="https://lookerstudio.google.com/embed/reporting/52ffa4b7-c386-4c77-b5c8-ad765c9f15cc/page/2hjKE"
-      scrolling="no"
       className="border-0 p-0 h-min-max overscroll-none overflow-hidden"
       sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
     />
diff --git a/src/themed/text/Text.tsx b/src/themed/text/Text.tsx
index ae10f14..cf99323 100644
--- a/src/themed/text/Text.tsx
+++ b/src/themed/text/Text.tsx
@@ -10,7 +10,7 @@ export type TextProps = {
 };
 
 export function Text({ children, type, className }: TextProps & PropsWithChildren) {
-  let textClasses = 'text-lg mb-4';
+  let textClasses = 'text-md mb-4';
   if (type === 'menuItem') {
     textClasses = 'mb-0 text-sm';
   }

From c5b37a8bcebfb4e43012d015ccfc5782cad34201 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 5 Nov 2024 13:46:41 +0100
Subject: [PATCH 02/36] fix: label

---
 src/pages/my-city/MyCityPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/my-city/MyCityPage.tsx b/src/pages/my-city/MyCityPage.tsx
index c4de288..c3b3b30 100644
--- a/src/pages/my-city/MyCityPage.tsx
+++ b/src/pages/my-city/MyCityPage.tsx
@@ -123,7 +123,7 @@ const MyCity = () => {
                 labelId="label-attribute-search"
                 value={sortFilter}
                 onChange={handleSelectOptionChange}
-                label="Search"
+                label={t('layout.filter.order')}
               >
                 <MenuItem value="desc">{t('layout.filter.latest')}</MenuItem>
                 <MenuItem value="asc">{t('layout.filter.oldest')}</MenuItem>

From a353800a645ad9576df36e467a4b8b60219d965e Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 5 Nov 2024 14:11:25 +0100
Subject: [PATCH 03/36] fix: render dates

---
 src/components/PostBox.tsx | 7 +++++--
 src/schemas/entities.ts    | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/PostBox.tsx b/src/components/PostBox.tsx
index e2c12d7..427a1b8 100644
--- a/src/components/PostBox.tsx
+++ b/src/components/PostBox.tsx
@@ -6,11 +6,13 @@ import ThumbsUp from '@/assets/icons/thumbs-up.svg';
 import Trash from '@/assets/icons/trash.svg';
 import Text from '@/themed/text/Text';
 import CommentBox from './CommentBox';
+import { formatDateFromString } from '@/util';
+import useLangContext from '@/hooks/useLangContext';
 
 interface PostProps {
   id: number;
   author: string;
-  date: number;
+  date: string;
   location: string;
   text: string;
   image?: { photo_url: string };
@@ -20,6 +22,7 @@ interface PostProps {
 }
 
 const PostBox = ({ author, date, location, text, likes, image, id, comments, acronym }: PostProps) => {
+  const langContext = useLangContext();
   const { t } = useTranslation('feed');
   const [imageLoaded, setImageLoaded] = useState(false);
   const [openComments, setOpenComments] = useState(false);
@@ -33,7 +36,7 @@ const PostBox = ({ author, date, location, text, likes, image, id, comments, acr
         <Box>
           <Text className="mb-0 font-semibold">{author}</Text>
           <Text className="mb-0 opacity-60">
-            {date} • {location}
+            {formatDateFromString(langContext.state.selected, date)} • {location}
           </Text>
         </Box>
       </Box>
diff --git a/src/schemas/entities.ts b/src/schemas/entities.ts
index bc61ddd..7c14517 100644
--- a/src/schemas/entities.ts
+++ b/src/schemas/entities.ts
@@ -49,7 +49,7 @@ export interface HouseBlock extends BaseEntity {
 
 export interface Post {
   id: number;
-  createdAt: number;
+  createdAt: string;
   userAccountId: number;
   canDeleteByUser: boolean;
   createdBy: string;

From f0243884b28700c7311cc76841761ef898166290 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 5 Nov 2024 14:15:53 +0100
Subject: [PATCH 04/36] fix: i18n feed

---
 src/i18n/locales/es/feed.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/locales/es/feed.json b/src/i18n/locales/es/feed.json
index 4bd0dbb..2c21301 100644
--- a/src/i18n/locales/es/feed.json
+++ b/src/i18n/locales/es/feed.json
@@ -16,7 +16,7 @@
   "post": {
     "comment": "Comentarios",
     "likes": "Me gusta",
-    "delete": "Delete"
+    "delete": "Borrar"
   },
   "rankView": {
     "ranking": "Ranking",

From 23b3fa1b37d4d421d438afef018ca2ac0ab057d6 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 5 Nov 2024 16:37:20 +0100
Subject: [PATCH 05/36] feat: add city to create brigade form

---
 src/components/dialog/CreateTeamDialog.tsx | 32 ++++++++++++++++++++--
 src/i18n/locales/en/admin.json             |  4 ++-
 src/i18n/locales/es/admin.json             | 12 ++++----
 src/i18n/locales/pt/admin.json             |  4 ++-
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/components/dialog/CreateTeamDialog.tsx b/src/components/dialog/CreateTeamDialog.tsx
index fc46ff8..ebcd677 100644
--- a/src/components/dialog/CreateTeamDialog.tsx
+++ b/src/components/dialog/CreateTeamDialog.tsx
@@ -11,7 +11,7 @@ import { ErrorResponse } from 'react-router-dom';
 import useAxios from 'axios-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
 import useCreateMutation from '@/hooks/useCreateMutation';
-import { FormSelectOption } from '@/schemas';
+import { BaseObject, FormSelectOption } from '@/schemas';
 import { CreateTeam, CreateTeamInputType, createTeamSchema } from '@/schemas/create';
 import { Team } from '@/schemas/entities';
 import FormMultipleSelect from '@/themed/form-multiple-select/FormMultipleSelect';
@@ -21,6 +21,7 @@ import { Button } from '../../themed/button/Button';
 import { FormInput } from '../../themed/form-input/FormInput';
 import { Title } from '../../themed/title/Title';
 import { convertToFormSelectOptions, extractAxiosErrorData } from '../../util';
+import useStateContext from '@/hooks/useStateContext';
 
 export interface EditUserProps {
   user: IUser;
@@ -32,8 +33,8 @@ interface CreateTeamDialogProps {
 }
 
 export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogProps) {
-  // const { state } = useStateContext();
-  // const user = state.user as IUser;
+  const { state } = useStateContext();
+  const user = state.user as IUser;
   const { t } = useTranslation(['register', 'errorCodes', 'admin', 'translation']);
   const { createMutation: createTeamMutation, loading: mutationLoading } = useCreateMutation<CreateTeam, Team>(
     `/teams`,
@@ -103,6 +104,21 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
     }
   }, [wedgesData]);
 
+  const [cityOptions, setCityOptions] = useState<FormSelectOption[]>([]);
+
+  const [{ data: cityData, loading: loadingCities }] = useAxios<ExistingDocumentObject, unknown, ErrorResponse>({
+    url: `countries/${(user.country as BaseObject).id}/states/${user.state.id}/cities`,
+  });
+
+  useEffect(() => {
+    if (!cityData) return;
+    const deserializedData = deserialize(cityData);
+    if (Array.isArray(deserializedData)) {
+      const cities = convertToFormSelectOptions(deserializedData);
+      setCityOptions(cities);
+    }
+  }, [cityData]);
+
   const { enqueueSnackbar } = useSnackbar();
 
   const methods = useForm<CreateTeamInputType>({
@@ -216,6 +232,16 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
                 placeholder={t('admin:teams.form.sector_placeholder')}
               />
             </Grid>
+            <Grid item xs={12} sm={12}>
+              <FormSelect
+                name="cityId"
+                className="mt-2"
+                label={t('admin:teams.form.city')}
+                loading={loadingCities}
+                options={cityOptions}
+                placeholder={t('admin:teams.form.city_placeholder')}
+              />
+            </Grid>
             <Grid item xs={12} sm={12}>
               <FormSelect
                 name="wedgeId"
diff --git a/src/i18n/locales/en/admin.json b/src/i18n/locales/en/admin.json
index 570f01a..5e0b348 100644
--- a/src/i18n/locales/en/admin.json
+++ b/src/i18n/locales/en/admin.json
@@ -46,7 +46,9 @@
       "sector": "Sector",
       "sector_placeholder": "Select sector",
       "wedge": "Wedge",
-      "wedge_placeholder": "Select wedge"
+      "wedge_placeholder": "Select wedge",
+      "city": "City",
+      "city_placeholder": "Select city"
     },
     "edit": {
       "edit_team": "Assign team members",
diff --git a/src/i18n/locales/es/admin.json b/src/i18n/locales/es/admin.json
index 3c2382c..3c4dfaf 100644
--- a/src/i18n/locales/es/admin.json
+++ b/src/i18n/locales/es/admin.json
@@ -38,15 +38,17 @@
       "name": "Nombre",
       "name_placeholder": "Ingresa un nombre",
       "members": "Miembros",
-      "members_placeholder": "Selecciona miembros",
+      "members_placeholder": "Selecciona a los miembros",
       "team_leader": "Líder del equipo",
-      "team_leader_placeholder": "Selecciona líder del equipo",
+      "team_leader_placeholder": "Selecciona un líder del equipo",
       "organization": "Organización",
-      "organization_placeholder": "Selecciona organización",
+      "organization_placeholder": "Selecciona una organización",
       "sector": "Sector",
-      "sector_placeholder": "Selecciona sector",
+      "sector_placeholder": "Selecciona un sector",
       "wedge": "Cuña",
-      "wedge_placeholder": "Selecciona cuña"
+      "wedge_placeholder": "Selecciona una cuña",
+      "city": "Ciudad",
+      "city_placeholder": "Selecciona una ciudad"
     },
     "edit": {
       "edit_team": "Asignar miembros del equipo",
diff --git a/src/i18n/locales/pt/admin.json b/src/i18n/locales/pt/admin.json
index b373a96..ee862f2 100644
--- a/src/i18n/locales/pt/admin.json
+++ b/src/i18n/locales/pt/admin.json
@@ -46,7 +46,9 @@
       "sector": "Setor",
       "sector_placeholder": "Selecione o setor",
       "wedge": "Cunha",
-      "wedge_placeholder": "Selecione a cunha"
+      "wedge_placeholder": "Selecione a cunha",
+      "city": "Cidade",
+      "city_placeholder": "Selecione uma cidade"
     },
     "edit": {
       "edit_team": "Atribuir membros da equipe",

From c525415910f7fbb67db9a00402cec1292c8739f5 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Wed, 6 Nov 2024 18:14:12 +0100
Subject: [PATCH 06/36] feat: setup rollbar

---
 .env.development |  1 +
 package.json     |  2 ++
 src/main.tsx     | 24 +++++++++++++++++++++---
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/.env.development b/.env.development
index 8ee8ab0..75bdb63 100644
--- a/.env.development
+++ b/.env.development
@@ -3,3 +3,4 @@ VITE_API_URL="https://apisandbox.denguechatplus.org"
 VITE_HOST="develop.denguechatplus.org"
 VITE_DEFAULT_LANG="es"
 VITE_LOCALE="es-ES"
+ROLLBAR_ACCESS_TOKEN=
diff --git a/package.json b/package.json
index 077be9b..e5ae0e2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.1",
+    "@rollbar/react": "^0.12.0-beta",
     "@tanstack/react-query": "^5.59.16",
     "axios": "^1.7.2",
     "axios-auth-refresh": "^3.3.6",
@@ -44,6 +45,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-number-format": "^5.4.0",
     "react-router-dom": "^6.24.0",
+    "rollbar": "^2.26.4",
     "tailwind-merge": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
     "zod": "^3.23.8"
diff --git a/src/main.tsx b/src/main.tsx
index 1568c62..dc3194a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,6 @@
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Provider } from '@rollbar/react';
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -17,10 +18,27 @@ dayjs.locale(import.meta.env.VITE_DEFAULT_LANG ?? 'es');
 const rootElement = document.getElementById('root-app') as HTMLElement;
 const root = ReactDOM.createRoot(rootElement);
 
+const rollbarConfig = {
+  accessToken: import.meta.env.ROLLBAR_ACCESS_TOKEN,
+  captureUncaught: true,
+  captureUnhandledRejections: true,
+  payload: {
+    client: {
+      javascript: {
+        code_version: '1.0.0',
+        source_map_enabled: true,
+      },
+    },
+  },
+};
+
 root.render(
   <StrictMode>
-    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={import.meta.env.VITE_DEFAULT_LANG ?? 'es'}>
-      <AppRouter />
-    </LocalizationProvider>
+    <Provider config={rollbarConfig}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={import.meta.env.VITE_DEFAULT_LANG ?? 'es'}>
+        <AppRouter />
+      </LocalizationProvider>
+    </Provider>
+    ,
   </StrictMode>,
 );

From e65709dddbce0d5e1c908e8a086d8ff313c671f4 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Wed, 6 Nov 2024 18:53:59 +0100
Subject: [PATCH 07/36] feat: update layout

---
 src/components/SelectLanguageComponent.tsx |   3 +-
 src/components/dialog/CreateTeamDialog.tsx |   2 +-
 src/layout/AppBar.tsx                      | 358 ++++++++++-----------
 src/layout/BaseLayout.tsx                  |   1 -
 4 files changed, 172 insertions(+), 192 deletions(-)

diff --git a/src/components/SelectLanguageComponent.tsx b/src/components/SelectLanguageComponent.tsx
index a4cda3d..19773e0 100644
--- a/src/components/SelectLanguageComponent.tsx
+++ b/src/components/SelectLanguageComponent.tsx
@@ -31,7 +31,7 @@ const getLocaleDisplayName = (locale: string, displayLocale?: string) => {
   return displayName.charAt(0).toLocaleUpperCase() + displayName.slice(1);
 };
 
-function SelectLanguageComponent() {
+function SelectLanguageComponent({ className }: { className?: string }) {
   const { i18n } = useTranslation();
   const { resolvedLanguage: currentLanguage } = i18n;
 
@@ -70,6 +70,7 @@ function SelectLanguageComponent() {
           onChange(e.target.value);
         }
       }}
+      className={className}
     >
       {options.map((option) => (
         <MenuItem key={`key-${option.value}`} value={option.value}>
diff --git a/src/components/dialog/CreateTeamDialog.tsx b/src/components/dialog/CreateTeamDialog.tsx
index fc46ff8..fc82a59 100644
--- a/src/components/dialog/CreateTeamDialog.tsx
+++ b/src/components/dialog/CreateTeamDialog.tsx
@@ -166,7 +166,7 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
           autoComplete="off"
           className="w-full p-8"
         >
-          <Title type="section" className="self-center mb-8i w-full" label="Create team" />
+          <Title type="section" className="self-center mb-8i w-full" label={t('admin:teams.create_team')} />
           <Grid container spacing={2}>
             <Grid item xs={12} sm={12}>
               <FormInput
diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
index 4226458..4c2eae9 100644
--- a/src/layout/AppBar.tsx
+++ b/src/layout/AppBar.tsx
@@ -98,129 +98,156 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
   };
 
   const drawer = (
-    <Box sx={{ paddingLeft: { xs: 2, sm: 0 } }}>
-      <Toolbar className="ml-4" disableGutters sx={{ height: '80px' }}>
-        <div className="flex flex-1 flex-col align-middle justify-center">
-          <Link to="/" style={{ textDecoration: 'none', color: '#fff' }}>
-            <img className={!matches ? 'right-4' : ''} src={Logo} alt="logo" />
-          </Link>
-        </div>
-      </Toolbar>
+    <Box sx={{ paddingLeft: { xs: 2, sm: 0 } }} className="flex flex-col justify-between min-h-full">
+      <Box>
+        <Toolbar className="ml-4" disableGutters sx={{ height: '80px' }}>
+          <div className="flex flex-1 flex-col align-middle justify-center">
+            <Link to="/" style={{ textDecoration: 'none', color: '#fff' }}>
+              <img className={!matches ? 'right-4' : ''} src={Logo} alt="logo" />
+            </Link>
+          </div>
+        </Toolbar>
 
-      <List
-        aria-labelledby="nested-list-subheader"
-        subheader={
-          <Box className="w-full px-4 py-2">
-            <TextField
-              size="small"
-              label={t(`menu.search`)}
-              variant="outlined"
-              value={searchText}
-              onChange={handleTextChange}
-            />
-          </Box>
-        }
-      >
-        <ListItemButton component={Link} to={MY_CITY} selected={pathname.includes(MY_CITY)}>
-          <ListItemIcon>
-            <Icon type="City" />
-          </ListItemIcon>
-          <ListItemText primary={<Text type="menuItem">{t('menu.myCity')}</Text>} />
-        </ListItemButton>
-        <ListItemButton component={Link} to={MY_COMMUNITY} selected={pathname.includes(MY_COMMUNITY)}>
-          <ListItemIcon>
-            <Icon type="Community" />
-          </ListItemIcon>
-          <ListItemText primary={<Text type="menuItem">{t('menu.myCommunity')}</Text>} />
-        </ListItemButton>
-        <ListItemButton>
-          <ListItemIcon>
-            <img src={TeamsIcon} alt="teams-icon" />
-          </ListItemIcon>
-          <ListItemText primary={<Text type="menuItem">{t('menu.teams')}</Text>} />
-        </ListItemButton>
-        <ListItemButton>
-          <ListItemIcon>
-            <img src={BugIcon} alt="breedingSites-icon" />
-          </ListItemIcon>
-          <ListItemText primary={<Text type="menuItem">{t('menu.breedingSites')}</Text>} />
-        </ListItemButton>
-        <ProtectedView
-          hasSomePermission={[ROLES_INDEX, ORGANIZATIONS_INDEX, USERS_INDEX, CITIES_INDEX, SPECIAL_PLACES_INDEX]}
+        <List
+          aria-labelledby="nested-list-subheader"
+          subheader={
+            <Box className="min-w-full px-4 py-2 mb-4">
+              <TextField
+                size="small"
+                label={t(`menu.search`)}
+                variant="outlined"
+                value={searchText}
+                onChange={handleTextChange}
+                className="min-w-full"
+              />
+            </Box>
+          }
         >
-          <ListItemButton onClick={handleClick}>
+          <ListItemButton component={Link} to={MY_CITY} selected={pathname.includes(MY_CITY)}>
             <ListItemIcon>
-              <img src={SettingsIcon} alt="settings-icon" />
+              <Icon type="City" />
             </ListItemIcon>
-            <ListItemText primary={<Text type="menuItem">{t('menu.settings')}</Text>} />
-            {open ? <ExpandLess /> : <ExpandMore />}
+            <ListItemText primary={<Text type="menuItem">{t('menu.myCity')}</Text>} />
           </ListItemButton>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <List component="div" disablePadding>
-              <ProtectedView hasPermission={[USERS_INDEX]}>
-                <ListItemButton
-                  sx={{ pl: 4 }}
-                  component={Link}
-                  to={ADMIN_USERS}
-                  selected={pathname.includes(ADMIN_USERS)}
-                >
-                  <ListItemText primary={<Text type="menuItem">{t('menu.users')}</Text>} />
-                </ListItemButton>
-              </ProtectedView>
-              <ProtectedView hasPermission={[ROLES_INDEX]}>
-                <ListItemButton
-                  sx={{ pl: 4 }}
-                  component={Link}
-                  to={ADMIN_ROLES}
-                  selected={pathname.includes(ADMIN_ROLES)}
-                >
-                  <ListItemText primary={<Text type="menuItem">{t('menu.roles')}</Text>} />
-                </ListItemButton>
-              </ProtectedView>
-              <ProtectedView hasPermission={[ORGANIZATIONS_INDEX]}>
-                <ListItemButton
-                  sx={{ pl: 4 }}
-                  component={Link}
-                  to={ADMIN_ORGANIZATIONS}
-                  selected={pathname.includes(ADMIN_ORGANIZATIONS)}
-                >
-                  <ListItemText primary={<Text type="menuItem">{t('menu.organizations')}</Text>} />
-                </ListItemButton>
-              </ProtectedView>
-              <ProtectedView hasPermission={[CITIES_INDEX]}>
-                <ListItemButton
-                  sx={{ pl: 4 }}
-                  component={Link}
-                  to={ADMIN_CITIES}
-                  selected={pathname.includes(ADMIN_CITIES)}
-                >
-                  <ListItemText primary={<Text type="menuItem">{t('menu.cities')}</Text>} />
-                </ListItemButton>
-              </ProtectedView>
-              <ProtectedView hasPermission={[SPECIAL_PLACES_INDEX]}>
-                <ListItemButton
-                  sx={{ pl: 4 }}
-                  component={Link}
-                  to={ADMIN_SPECIAL_PLACES}
-                  selected={pathname.includes(ADMIN_SPECIAL_PLACES)}
-                >
-                  <ListItemText primary={<Text type="menuItem">{t('menu.specialPlaces')}</Text>} />
-                </ListItemButton>
-              </ProtectedView>
-              <ProtectedView hasPermission={[TEAMS_INDEX]}>
-                <ListItemButton
-                  sx={{ pl: 4 }}
-                  component={Link}
-                  to={ADMIN_TEAMS}
-                  selected={pathname.includes(ADMIN_TEAMS)}
-                >
-                  <ListItemText primary={<Text type="menuItem">{t('menu.teams')}</Text>} />
-                </ListItemButton>
-              </ProtectedView>
-            </List>
-          </Collapse>
-        </ProtectedView>
-      </List>
+          <ListItemButton component={Link} to={MY_COMMUNITY} selected={pathname.includes(MY_COMMUNITY)}>
+            <ListItemIcon>
+              <Icon type="Community" />
+            </ListItemIcon>
+            <ListItemText primary={<Text type="menuItem">{t('menu.myCommunity')}</Text>} />
+          </ListItemButton>
+          <ListItemButton>
+            <ListItemIcon>
+              <img src={TeamsIcon} alt="teams-icon" />
+            </ListItemIcon>
+            <ListItemText primary={<Text type="menuItem">{t('menu.teams')}</Text>} />
+          </ListItemButton>
+          <ListItemButton>
+            <ListItemIcon>
+              <img src={BugIcon} alt="breedingSites-icon" />
+            </ListItemIcon>
+            <ListItemText primary={<Text type="menuItem">{t('menu.breedingSites')}</Text>} />
+          </ListItemButton>
+          <ProtectedView
+            hasSomePermission={[ROLES_INDEX, ORGANIZATIONS_INDEX, USERS_INDEX, CITIES_INDEX, SPECIAL_PLACES_INDEX]}
+          >
+            <ListItemButton onClick={handleClick}>
+              <ListItemIcon>
+                <img src={SettingsIcon} alt="settings-icon" />
+              </ListItemIcon>
+              <ListItemText primary={<Text type="menuItem">{t('menu.settings')}</Text>} />
+              {open ? <ExpandLess /> : <ExpandMore />}
+            </ListItemButton>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <List component="div" disablePadding>
+                <ProtectedView hasPermission={[USERS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_USERS}
+                    selected={pathname.includes(ADMIN_USERS)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.users')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[ROLES_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_ROLES}
+                    selected={pathname.includes(ADMIN_ROLES)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.roles')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[ORGANIZATIONS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_ORGANIZATIONS}
+                    selected={pathname.includes(ADMIN_ORGANIZATIONS)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.organizations')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[CITIES_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_CITIES}
+                    selected={pathname.includes(ADMIN_CITIES)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.cities')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[SPECIAL_PLACES_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_SPECIAL_PLACES}
+                    selected={pathname.includes(ADMIN_SPECIAL_PLACES)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.specialPlaces')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[TEAMS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_TEAMS}
+                    selected={pathname.includes(ADMIN_TEAMS)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.teams')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+              </List>
+            </Collapse>
+          </ProtectedView>
+        </List>
+      </Box>
+      <Box>
+        <Box className="px-4 min-w-full">
+          <SelectLanguageComponent className="min-w-full" />
+        </Box>
+
+        <Box className="px-4 mb-4 mt-4 min-w-full">
+          {auth && !!logout && (
+            <Button className="mr-4 min-w-full" buttonType="small" label={t('logout')} onClick={() => logout()} />
+          )}
+          {!auth && location.pathname !== '/login' && (
+            <Button
+              primary={false}
+              className="mr-4"
+              buttonType="large"
+              label={t('login')}
+              component={Link}
+              to="/login"
+            />
+          )}
+          {signUp && !auth && (
+            <Button className="mr-4" buttonType="small" label={t('register')} component={Link} to="/register" />
+          )}
+        </Box>
+      </Box>
     </Box>
   );
 
@@ -262,80 +289,33 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
   }
 
   return (
-    <>
-      <MuiAppBar
-        // position="static"
-        className="bg-white border-solid border-b border-neutral mb-4"
-        elevation={0}
-        position="fixed"
+    <Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }} aria-label="drawer menu">
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onTransitionEnd={handleDrawerTransitionEnd}
+        onClose={handleDrawerClose}
+        ModalProps={{
+          keepMounted: true, // Better open performance on mobile.
+        }}
         sx={{
-          width: { sm: `calc(100% - ${drawerWidth}px)` },
-          ml: { sm: `${drawerWidth}px` },
+          display: { xs: 'block', sm: 'none' },
+          '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
         }}
       >
-        <Container maxWidth={false} className="lg:px-20 md:px-12 sm:px-10 px-6 mx-0">
-          <Toolbar disableGutters sx={{ height: '80px' }}>
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              edge="start"
-              onClick={handleDrawerToggle}
-              sx={{ mr: 2, display: { sm: 'none' } }}
-            >
-              <MenuIcon color="primary" />
-            </IconButton>
-
-            <Box sx={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>
-              {auth && !!logout && (
-                <Button className="mr-4" buttonType="small" label={t('logout')} onClick={() => logout()} />
-              )}
-              {!auth && location.pathname !== '/login' && (
-                <Button
-                  primary={false}
-                  className="mr-4"
-                  buttonType="small"
-                  label={t('login')}
-                  component={Link}
-                  to="/login"
-                />
-              )}
-              {signUp && !auth && (
-                <Button className="mr-4" buttonType="small" label={t('register')} component={Link} to="/register" />
-              )}
-
-              <SelectLanguageComponent />
-            </Box>
-          </Toolbar>
-        </Container>
-      </MuiAppBar>
-      <Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }} aria-label="drawer menu">
-        <Drawer
-          variant="temporary"
-          open={mobileOpen}
-          onTransitionEnd={handleDrawerTransitionEnd}
-          onClose={handleDrawerClose}
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-          }}
-          sx={{
-            display: { xs: 'block', sm: 'none' },
-            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
-          }}
-        >
-          {drawer}
-        </Drawer>
-        <Drawer
-          variant="permanent"
-          sx={{
-            display: { xs: 'none', sm: 'block' },
-            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
-          }}
-          open
-        >
-          {drawer}
-        </Drawer>
-      </Box>
-    </>
+        {drawer}
+      </Drawer>
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: 'none', sm: 'block' },
+          '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+        }}
+        open
+      >
+        {drawer}
+      </Drawer>
+    </Box>
   );
 }
 
diff --git a/src/layout/BaseLayout.tsx b/src/layout/BaseLayout.tsx
index 988405f..5fee571 100644
--- a/src/layout/BaseLayout.tsx
+++ b/src/layout/BaseLayout.tsx
@@ -29,7 +29,6 @@ export default function BaseLayout({ children, auth, signUp, logout, footer }: A
       <ScrollToTop />
       <AppBar auth={auth} signUp={signUp} logout={logout} />
       <Box component="main" sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}>
-        <Toolbar disableGutters />
         {children}
       </Box>
     </Box>

From a502e765dcba2617fbcc0e5ae3d56e29e2d66596 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Wed, 6 Nov 2024 18:54:55 +0100
Subject: [PATCH 08/36] chore: remove unused

---
 src/layout/AppBar.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
index 4c2eae9..828bcc4 100644
--- a/src/layout/AppBar.tsx
+++ b/src/layout/AppBar.tsx
@@ -3,7 +3,6 @@ import {
   Collapse,
   Container,
   Drawer,
-  IconButton,
   List,
   ListItemButton,
   ListItemIcon,
@@ -17,21 +16,19 @@ import { useTranslation } from 'react-i18next';
 
 import { Link, useLocation } from 'react-router-dom';
 
-import MenuIcon from '@mui/icons-material/Menu';
-
 import React, { useState } from 'react';
 
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
 import Icon from '@/components/icon';
 import {
   CITIES_INDEX,
   ORGANIZATIONS_INDEX,
   ROLES_INDEX,
-  USERS_INDEX,
   SPECIAL_PLACES_INDEX,
   TEAMS_INDEX,
+  USERS_INDEX,
 } from '@/constants/permissions';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import BugIcon from '../assets/icons/bug.svg';
 import SettingsIcon from '../assets/icons/settings.svg';
 import TeamsIcon from '../assets/icons/teams.svg';

From 1865ddf367196fd2a5ffcdde3ad7edc9f463b4da Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Wed, 6 Nov 2024 19:00:50 +0100
Subject: [PATCH 09/36] fix: unused

---
 src/layout/AppBar.tsx     | 10 +++++-----
 src/layout/BaseLayout.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
index 828bcc4..efc9fa0 100644
--- a/src/layout/AppBar.tsx
+++ b/src/layout/AppBar.tsx
@@ -76,11 +76,11 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
     setIsClosing(false);
   };
 
-  const handleDrawerToggle = () => {
-    if (!isClosing) {
-      setMobileOpen(!mobileOpen);
-    }
-  };
+  // const handleDrawerToggle = () => {
+  //   if (!isClosing) {
+  //     setMobileOpen(!mobileOpen);
+  //   }
+  // };
 
   const [searchText, setSearchText] = useState('');
 
diff --git a/src/layout/BaseLayout.tsx b/src/layout/BaseLayout.tsx
index 5fee571..5d2afa6 100644
--- a/src/layout/BaseLayout.tsx
+++ b/src/layout/BaseLayout.tsx
@@ -1,4 +1,4 @@
-import { Box, Container, Toolbar } from '@mui/material';
+import { Box, Container } from '@mui/material';
 import { PropsWithChildren } from 'react';
 
 import { ScrollToTop } from '../components/ScrollToTop';

From 9a544b44a703481fddf544a9b736430674538262 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Wed, 6 Nov 2024 19:06:29 +0100
Subject: [PATCH 10/36] feat: add isologo to ranking

---
 src/components/list/RankViewBox.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/list/RankViewBox.tsx b/src/components/list/RankViewBox.tsx
index 02e83fe..bce38bc 100644
--- a/src/components/list/RankViewBox.tsx
+++ b/src/components/list/RankViewBox.tsx
@@ -62,7 +62,9 @@ const RankViewBox = () => {
                 data[rankView].map((item) => (
                   <Box className="flex justify-between mb-6" key={item.first_name + item.quantity}>
                     <Box className="flex flex-row items-center gap-3">
-                      <Box className="rounded-full h-10 w-10 bg-neutral-100" />
+                      <Box className="rounded-full h-10 w-10 bg-neutral-100 flex items-center justify-center">
+                        <p className="font-semibold opacity-50 text-sm">{`${item.first_name?.[0].toUpperCase()}${item.last_name?.[0].toUpperCase()}`}</p>
+                      </Box>
                       <Text className="font-semibold text-neutral-400 opacity-70 mb-0">
                         {item.first_name} {item.last_name}
                       </Text>

From 38b4f881d4fcbfc9f971f4255b40c32ed9842d95 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Wed, 6 Nov 2024 19:11:13 +0100
Subject: [PATCH 11/36] fix: remove unused

---
 src/layout/AppBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
index efc9fa0..cc11efc 100644
--- a/src/layout/AppBar.tsx
+++ b/src/layout/AppBar.tsx
@@ -65,7 +65,7 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
   const matches = useMediaQuery('(min-width:600px)');
 
   const [mobileOpen, setMobileOpen] = React.useState(false);
-  const [isClosing, setIsClosing] = React.useState(false);
+  const [, setIsClosing] = React.useState(false);
 
   const handleDrawerClose = () => {
     setIsClosing(true);

From 343ad5eaca785a20bff536ca042d0d1030a7574a Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 12 Nov 2024 13:50:03 +0100
Subject: [PATCH 12/36] fix: uppercase titles

---
 src/i18n/locales/en/admin.json | 2 +-
 src/i18n/locales/es/admin.json | 2 +-
 src/i18n/locales/pt/admin.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/locales/en/admin.json b/src/i18n/locales/en/admin.json
index 5e0b348..1fc1953 100644
--- a/src/i18n/locales/en/admin.json
+++ b/src/i18n/locales/en/admin.json
@@ -33,7 +33,7 @@
     }
   },
   "teams": {
-    "create_team": "Create brigade",
+    "create_team": "Create Brigade",
     "form": {
       "name": "Name",
       "name_placeholder": "Enter a name",
diff --git a/src/i18n/locales/es/admin.json b/src/i18n/locales/es/admin.json
index 3c4dfaf..e059bec 100644
--- a/src/i18n/locales/es/admin.json
+++ b/src/i18n/locales/es/admin.json
@@ -33,7 +33,7 @@
     }
   },
   "teams": {
-    "create_team": "Crear brigada",
+    "create_team": "Crear Brigada",
     "form": {
       "name": "Nombre",
       "name_placeholder": "Ingresa un nombre",
diff --git a/src/i18n/locales/pt/admin.json b/src/i18n/locales/pt/admin.json
index ee862f2..407c0ea 100644
--- a/src/i18n/locales/pt/admin.json
+++ b/src/i18n/locales/pt/admin.json
@@ -33,7 +33,7 @@
     }
   },
   "teams": {
-    "create_team": "Criar brigada",
+    "create_team": "Criar Brigada",
     "form": {
       "name": "Nome",
       "name_placeholder": "Insira um nome",

From 03c6afac03cf07b6e1ea7293408b430562d85646 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 12 Nov 2024 14:28:29 +0100
Subject: [PATCH 13/36] feat: add tooltip to progress bar

---
 src/assets/icons/help.svg               |  3 +++
 src/components/SitesReport.tsx          | 14 ++++++++++++--
 src/i18n/locales/en/feed.json           |  4 +++-
 src/i18n/locales/es/feed.json           |  4 +++-
 src/i18n/locales/pt/feed.json           |  4 +++-
 src/themed/progress-bar/ProgressBar.tsx | 15 ++++++++++++---
 6 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/icons/help.svg

diff --git a/src/assets/icons/help.svg b/src/assets/icons/help.svg
new file mode 100644
index 0000000..cbeb881
--- /dev/null
+++ b/src/assets/icons/help.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.95768 14.9998C10.2493 14.9998 10.4959 14.8991 10.6973 14.6978C10.8987 14.4964 10.9993 14.2498 10.9993 13.9582C10.9993 13.6665 10.8987 13.42 10.6973 13.2186C10.4959 13.0172 10.2493 12.9165 9.95768 12.9165C9.66602 12.9165 9.41949 13.0172 9.2181 13.2186C9.01671 13.42 8.91602 13.6665 8.91602 13.9582C8.91602 14.2498 9.01671 14.4964 9.2181 14.6978C9.41949 14.8991 9.66602 14.9998 9.95768 14.9998ZM9.20768 11.7915H10.7493C10.7493 11.3332 10.8014 10.9721 10.9056 10.7082C11.0098 10.4443 11.3049 10.0832 11.791 9.62484C12.1521 9.26373 12.4368 8.91998 12.6452 8.59359C12.8535 8.2672 12.9577 7.87484 12.9577 7.4165C12.9577 6.63873 12.673 6.0415 12.1035 5.62484C11.5341 5.20817 10.8605 4.99984 10.0827 4.99984C9.29102 4.99984 8.64865 5.20817 8.1556 5.62484C7.66254 6.0415 7.31879 6.5415 7.12435 7.12484L8.49935 7.6665C8.56879 7.4165 8.72504 7.14567 8.9681 6.854C9.21115 6.56234 9.58268 6.4165 10.0827 6.4165C10.5271 6.4165 10.8605 6.53803 11.0827 6.78109C11.3049 7.02414 11.416 7.2915 11.416 7.58317C11.416 7.86095 11.3327 8.12136 11.166 8.36442C10.9993 8.60748 10.791 8.83317 10.541 9.0415C9.9299 9.58317 9.5549 9.99289 9.41602 10.2707C9.27713 10.5484 9.20768 11.0554 9.20768 11.7915ZM9.99935 18.3332C8.84657 18.3332 7.76324 18.1144 6.74935 17.6769C5.73546 17.2394 4.85352 16.6457 4.10352 15.8957C3.35352 15.1457 2.75977 14.2637 2.32227 13.2498C1.88477 12.2359 1.66602 11.1526 1.66602 9.99984C1.66602 8.84706 1.88477 7.76373 2.32227 6.74984C2.75977 5.73595 3.35352 4.854 4.10352 4.104C4.85352 3.354 5.73546 2.76025 6.74935 2.32275C7.76324 1.88525 8.84657 1.6665 9.99935 1.6665C11.1521 1.6665 12.2355 1.88525 13.2493 2.32275C14.2632 2.76025 15.1452 3.354 15.8952 4.104C16.6452 4.854 17.2389 5.73595 17.6764 6.74984C18.1139 7.76373 18.3327 8.84706 18.3327 9.99984C18.3327 11.1526 18.1139 12.2359 17.6764 13.2498C17.2389 14.2637 16.6452 15.1457 15.8952 15.8957C15.1452 16.6457 14.2632 17.2394 13.2493 17.6769C12.2355 18.1144 11.1521 18.3332 9.99935 18.3332ZM9.99935 16.6665C11.8605 16.6665 13.4368 16.0207 14.7285 14.729C16.0202 13.4373 16.666 11.8609 16.666 9.99984C16.666 8.13873 16.0202 6.56234 14.7285 5.27067C13.4368 3.979 11.8605 3.33317 9.99935 3.33317C8.13824 3.33317 6.56185 3.979 5.27018 5.27067C3.97852 6.56234 3.33268 8.13873 3.33268 9.99984C3.33268 11.8609 3.97852 13.4373 5.27018 14.729C6.56185 16.0207 8.13824 16.6665 9.99935 16.6665Z" fill="#A9A29D"/>
+</svg>
diff --git a/src/components/SitesReport.tsx b/src/components/SitesReport.tsx
index cd95b55..4cf0374 100644
--- a/src/components/SitesReport.tsx
+++ b/src/components/SitesReport.tsx
@@ -11,8 +11,18 @@ const SitesReport = () => {
       <Title label={t('sitesReport.title')} type="subsection" className="mb-0" />
       <Box className="flex flex-col mt-6">
         <>
-          <ProgressBar label={t('sitesReport.title')} progress={60} color="bg-green-600" />
-          <ProgressBar label={t('sitesReport.quantity')} progress={80} color="bg-green-800" />
+          <ProgressBar
+            label={t('sitesReport.title')}
+            progress={60}
+            color="bg-green-600"
+            tooltip={t('sitesReport.tarikiSiteInfo')}
+          />
+          <ProgressBar
+            label={t('sitesReport.quantity')}
+            progress={80}
+            color="bg-green-800"
+            tooltip={t('sitesReport.greenContainersInfo')}
+          />
         </>
       </Box>
     </Box>
diff --git a/src/i18n/locales/en/feed.json b/src/i18n/locales/en/feed.json
index e72e4b0..88df867 100644
--- a/src/i18n/locales/en/feed.json
+++ b/src/i18n/locales/en/feed.json
@@ -3,7 +3,9 @@
   "city": "City of",
   "sitesReport": {
     "title": "Tariki Sites",
-    "quantity": "Amount of green containers"
+    "quantity": "Amount of green containers",
+    "tarikiSiteInfo": "A Tariki site is one that has been a green site for at least four consecutive visits",
+    "greenContainersInfo": "Status of green containers, up to the end date of the last month (monthly data)"
   },
   "layout": {
     "filters": "Filters",
diff --git a/src/i18n/locales/es/feed.json b/src/i18n/locales/es/feed.json
index 2c21301..223753f 100644
--- a/src/i18n/locales/es/feed.json
+++ b/src/i18n/locales/es/feed.json
@@ -3,7 +3,9 @@
   "city": "Ciudad de",
   "sitesReport": {
     "title": "Sitios Tariki",
-    "quantity": "Cantidad de contenedores verdes"
+    "quantity": "Cantidad de contenedores verdes",
+    "tarikiSiteInfo": "Un sitio Tariki es aquel que ha sido un sitio verde por lo menos durante cuatro visitas consecutivas",
+    "greenContainersInfo": "Estado de contenedores verdes, hasta la fecha del fin del último mes (dato mensual)"
   },
   "layout": {
     "filters": "Filtros",
diff --git a/src/i18n/locales/pt/feed.json b/src/i18n/locales/pt/feed.json
index ba7c765..efb1673 100644
--- a/src/i18n/locales/pt/feed.json
+++ b/src/i18n/locales/pt/feed.json
@@ -3,7 +3,9 @@
   "city": "Cidade de",
   "sitesReport": {
     "title": "Locais Tariki",
-    "quantity": "Quantidade de contêineres verdes"
+    "quantity": "Quantidade de contêineres verdes",
+    "tarikiSiteInfo": "Um site Tariki é aquele que foi um site verde por pelo menos quatro visitas consecutivas",
+    "greenContainersInfo": "Estado dos contêineres verdes, até a data de término do último mês (dados mensais)"
   },
   "layout": {
     "filters": "Filtros",
diff --git a/src/themed/progress-bar/ProgressBar.tsx b/src/themed/progress-bar/ProgressBar.tsx
index e89b7f5..295d883 100644
--- a/src/themed/progress-bar/ProgressBar.tsx
+++ b/src/themed/progress-bar/ProgressBar.tsx
@@ -1,18 +1,27 @@
-import { Box } from '@mui/material';
+import { Box, Tooltip } from '@mui/material';
 import React from 'react';
 import Text from '../text/Text';
+import Help from '@/assets/icons/help.svg';
 
 export interface ProgressBarProps {
   label: string;
   progress: number;
   color: string;
+  tooltip?: string;
 }
 
-export const ProgressBar: React.FC<ProgressBarProps> = ({ label, progress, color }) => {
+export const ProgressBar: React.FC<ProgressBarProps> = ({ label, progress, color, tooltip }) => {
   return (
     <Box className="flex-col items-start mb-4">
       <Box className="flex flex-row justify-between">
-        <Text className="text-gray-800 font-medium mr-4 mb-2">{label}</Text>
+        <Box className="flex">
+          <Text className="text-gray-800 font-medium mr-2 mb-0">{label}</Text>
+          {tooltip && (
+            <Tooltip title={tooltip} placement="top">
+              <img className="self-start mt-1" src={Help} alt="help" width="18" />
+            </Tooltip>
+          )}
+        </Box>
         <Text className="text-gray-800 font-medium ml-4">{progress}</Text>
       </Box>
       <Box className="flex-row items-center">

From f4e6002bb3fc24626b16cbc46210ac328ce8e693 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 12 Nov 2024 14:47:05 +0100
Subject: [PATCH 14/36] fix: remove team leader

---
 src/components/dialog/CreateTeamDialog.tsx | 10 ----------
 src/schemas/create.ts                      |  2 --
 2 files changed, 12 deletions(-)

diff --git a/src/components/dialog/CreateTeamDialog.tsx b/src/components/dialog/CreateTeamDialog.tsx
index fef3db6..2af6d0b 100644
--- a/src/components/dialog/CreateTeamDialog.tsx
+++ b/src/components/dialog/CreateTeamDialog.tsx
@@ -202,16 +202,6 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
                 options={userOptions}
               />
             </Grid>
-            <Grid item xs={12} sm={12}>
-              <FormSelect
-                name="leaderId"
-                className="mt-2"
-                label={t('admin:teams.form.team_leader')}
-                loading={loadingUsers}
-                options={userOptions}
-                placeholder={t('admin:teams.form.team_leader_placeholder')}
-              />
-            </Grid>
             <Grid item xs={12} sm={12}>
               <FormSelect
                 name="organizationId"
diff --git a/src/schemas/create.ts b/src/schemas/create.ts
index 1174183..3328aeb 100644
--- a/src/schemas/create.ts
+++ b/src/schemas/create.ts
@@ -49,7 +49,6 @@ export const createTeamSchema = () => {
   return object({
     name: requiredNameString,
     organizationId: string(),
-    leaderId: string(),
     sectorId: string(),
     wedgeId: string(),
     memberIds: array(object({ label: string(), value: string() })).min(1),
@@ -62,7 +61,6 @@ export type CreateTeamInputType = TypeOf<typeof createTeamSchemaForType>;
 export interface CreateTeam {
   name: string;
   organizationId: string;
-  leaderId: string;
   sectorId: string;
   wedgeId: string;
   memberIds: string[];

From d2436bd82286d76570fdeb1f6bb178250b895d55 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Thu, 14 Nov 2024 14:05:12 +0100
Subject: [PATCH 15/36] fix: fix sorting and layout

---
 src/pages/my-city/MyCityPage.tsx | 103 ++++++++++++++++---------------
 src/routes/AppRouter.tsx         |   4 +-
 2 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/pages/my-city/MyCityPage.tsx b/src/pages/my-city/MyCityPage.tsx
index c3b3b30..ace9394 100644
--- a/src/pages/my-city/MyCityPage.tsx
+++ b/src/pages/my-city/MyCityPage.tsx
@@ -1,6 +1,6 @@
 import { Box, Divider, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import { deserialize } from 'jsonapi-fractal';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { authApi } from '@/api/axios';
@@ -27,73 +27,75 @@ const MyCity = () => {
   const [sortFilter, setSortFilter] = useState<Sort>('desc');
   const [loading, setLoading] = useState(false);
 
-  const fetchData = async (page: number, teamId?: number | string, sort?: Sort) => {
-    setError('');
-    try {
-      const response = await authApi.get('posts', {
-        headers: {
-          source: 'mobile',
-        },
-        params: {
-          'filter[team_id]': teamId,
-          'page[number]': page,
-          'page[size]': 6,
-          sort: 'created_at',
-          order: sort,
-        },
-      });
+  const fetchData = useCallback(
+    async (page: number, teamId?: number | string, sort?: Sort) => {
+      setError('');
+      try {
+        const response = await authApi.get('posts', {
+          headers: {
+            source: 'mobile',
+          },
+          params: {
+            'filter[team_id]': teamId,
+            'page[number]': page,
+            'page[size]': 6,
+            sort: 'created_at',
+            order: sort,
+          },
+        });
 
-      const data = response?.data;
-      if (data) {
-        const deserializedData = deserialize<Post>(data);
-        if (!deserializedData || !Array.isArray(deserializedData)) return;
+        const data = response?.data;
+        if (data) {
+          const deserializedData = deserialize<Post>(data);
+          if (!deserializedData || !Array.isArray(deserializedData)) return;
 
-        if (page === 1) {
-          const uniqueList = Array.from(new Set(deserializedData.map((item) => item.id)))
-            .map((id) => deserializedData.find((item) => item.id === id))
-            .filter((item) => item !== undefined);
+          if (page === 1) {
+            const uniqueList = Array.from(new Set(deserializedData.map((item) => item.id)))
+              .map((id) => deserializedData.find((item) => item.id === id))
+              .filter((item) => item !== undefined);
 
-          setDataList(uniqueList);
-        } else {
-          setDataList((prevData) => {
-            const updatedList = [...prevData, ...deserializedData];
+            setDataList(uniqueList);
+          } else {
+            setDataList((prevData) => {
+              const updatedList = [...prevData, ...deserializedData];
 
-            const uniqueList = Array.from(new Set(updatedList.map((item) => item.id)))
-              .map((id) => updatedList.find((item) => item.id === id))
-              .filter((item) => item !== undefined);
+              const uniqueList = Array.from(new Set(updatedList.map((item) => item.id)))
+                .map((id) => updatedList.find((item) => item.id === id))
+                .filter((item) => item !== undefined);
 
-            return uniqueList;
-          });
-        }
+              return uniqueList;
+            });
+          }
 
-        // console.log("data.links>>>", data.links);
-        setHasMore(data.links?.self !== data.links?.last);
+          // console.log("data.links>>>", data.links);
+          setHasMore(data.links?.self !== data.links?.last);
+        }
+      } catch (err) {
+        console.log('error>>>>>>', err);
+        setError(t('errorCodes:generic'));
+      } finally {
+        setLoadingMore(false);
       }
-    } catch (err) {
-      console.log('error>>>>>>', err);
-      setError(t('errorCodes:generic'));
-    } finally {
-      setLoadingMore(false);
-    }
-  };
+    },
+    [t],
+  );
 
   const loadMoreData = () => {
     if (!loadingMore && hasMore && !error) {
       setLoadingMore(true);
       const nextPage = currentPage + 1;
-      console.log('loadMoreData>>>> ', nextPage);
       setCurrentPage(nextPage);
-      fetchData(nextPage, all ? undefined : (user?.team as Team)?.id);
+      fetchData(nextPage, all ? undefined : (user?.team as Team)?.id, sortFilter);
     }
   };
 
-  const firstLoad = () => {
+  const firstLoad = useCallback(() => {
     // setAll(true);
     setDataList([]);
     setHasMore(true);
     setCurrentPage(1);
-    fetchData(1, undefined);
-  };
+    fetchData(1, undefined, sortFilter);
+  }, [sortFilter, fetchData]);
 
   useEffect(() => {
     firstLoad();
@@ -104,7 +106,10 @@ const MyCity = () => {
     const selectedSort = e?.target.value as Sort;
     setSortFilter(selectedSort);
     setLoading(true);
-    await fetchData(currentPage, undefined, selectedSort);
+    setHasMore(true);
+    setDataList([]);
+    setCurrentPage(1);
+    await fetchData(1, undefined, selectedSort);
     setLoading(false);
   };
 
diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx
index bfc4594..aac05c0 100644
--- a/src/routes/AppRouter.tsx
+++ b/src/routes/AppRouter.tsx
@@ -53,7 +53,7 @@ const router = createBrowserRouter([
     element: (
       <ProtectedRoute>
         <PageLayout>
-          <MyCity />,
+          <MyCity />
         </PageLayout>
       </ProtectedRoute>
     ),
@@ -63,7 +63,7 @@ const router = createBrowserRouter([
     element: (
       <ProtectedRoute>
         <PageLayout>
-          <MyCommunity />,
+          <MyCommunity />
         </PageLayout>
       </ProtectedRoute>
     ),

From 69f322587793cb544d425ab674bd76bff36d14a7 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Tue, 19 Nov 2024 17:32:19 -0300
Subject: [PATCH 16/36] feat: add a new menu for Reports along with its
 submenus

---
 src/layout/AppBar.tsx | 74 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 69 insertions(+), 5 deletions(-)

diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
index cc11efc..4134d56 100644
--- a/src/layout/AppBar.tsx
+++ b/src/layout/AppBar.tsx
@@ -18,6 +18,8 @@ import { Link, useLocation } from 'react-router-dom';
 
 import React, { useState } from 'react';
 
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import Icon from '@/components/icon';
 import {
   CITIES_INDEX,
@@ -27,10 +29,9 @@ import {
   TEAMS_INDEX,
   USERS_INDEX,
 } from '@/constants/permissions';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
 import BugIcon from '../assets/icons/bug.svg';
 import SettingsIcon from '../assets/icons/settings.svg';
+import ReportsIcon from '../assets/icons/reports.svg';
 import TeamsIcon from '../assets/icons/teams.svg';
 import Logo from '../assets/images/logo.svg';
 import SelectLanguageComponent from '../components/SelectLanguageComponent';
@@ -49,6 +50,9 @@ export interface AppBarProps {
 
 // routes
 const ADMIN_USERS = '/admin/users';
+const ADMIN_SITES = '/sites';
+const ADMIN_HEATMAP = '/heat-map';
+const ADMIN_VISITS = '/visits';
 const ADMIN_ROLES = '/admin/roles';
 const ADMIN_ORGANIZATIONS = '/admin/organizations';
 const ADMIN_CITIES = '/admin/cities';
@@ -94,6 +98,21 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
     setOpen(!open);
   };
 
+  const [openMenus, setOpenMenus] = React.useState<{ [key: string]: boolean }>({
+    settingsMenu: false,
+    reportsMenu: false,
+  });
+
+  const genericHandleClick = (menuId: string) => {
+    setOpenMenus((prev) => {
+      const isOpen = prev[menuId];
+      return {
+        ...prev,
+        [menuId]: !isOpen,
+      };
+    });
+  };
+
   const drawer = (
     <Box sx={{ paddingLeft: { xs: 2, sm: 0 } }} className="flex flex-col justify-between min-h-full">
       <Box>
@@ -147,14 +166,14 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
           <ProtectedView
             hasSomePermission={[ROLES_INDEX, ORGANIZATIONS_INDEX, USERS_INDEX, CITIES_INDEX, SPECIAL_PLACES_INDEX]}
           >
-            <ListItemButton onClick={handleClick}>
+            <ListItemButton onClick={() => genericHandleClick('settingsMenu')}>
               <ListItemIcon>
                 <img src={SettingsIcon} alt="settings-icon" />
               </ListItemIcon>
               <ListItemText primary={<Text type="menuItem">{t('menu.settings')}</Text>} />
-              {open ? <ExpandLess /> : <ExpandMore />}
+              {openMenus.settingsMenu ? <ExpandLess /> : <ExpandMore />}
             </ListItemButton>
-            <Collapse in={open} timeout="auto" unmountOnExit>
+            <Collapse in={openMenus.settingsMenu} timeout="auto" unmountOnExit>
               <List component="div" disablePadding>
                 <ProtectedView hasPermission={[USERS_INDEX]}>
                   <ListItemButton
@@ -219,6 +238,51 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
               </List>
             </Collapse>
           </ProtectedView>
+          <ProtectedView
+            hasSomePermission={[ROLES_INDEX, ORGANIZATIONS_INDEX, USERS_INDEX, CITIES_INDEX, SPECIAL_PLACES_INDEX]}
+          >
+            <ListItemButton onClick={() => genericHandleClick('reportsMenu')}>
+              <ListItemIcon>
+                <img src={ReportsIcon} alt="reports-icon" />
+              </ListItemIcon>
+              <ListItemText primary={<Text type="menuItem">{t('menu.reports.name')}</Text>} />
+              {openMenus.reportsMenu ? <ExpandLess /> : <ExpandMore />}
+            </ListItemButton>
+            <Collapse in={openMenus.reportsMenu} timeout="auto" unmountOnExit>
+              <List component="div" disablePadding>
+                <ProtectedView hasPermission={[USERS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_SITES}
+                    selected={pathname.includes(ADMIN_SITES)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.sites')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[USERS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_HEATMAP}
+                    selected={pathname.includes(ADMIN_HEATMAP)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.heatMap')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[USERS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_VISITS}
+                    selected={pathname.includes(ADMIN_VISITS)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.visits')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+              </List>
+            </Collapse>
+          </ProtectedView>
         </List>
       </Box>
       <Box>

From dbc4b870985d1da022d6ccda907bb15cb1a0bffa Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Tue, 19 Nov 2024 17:32:51 -0300
Subject: [PATCH 17/36] feat: add new routes for reports

---
 src/routes/AppRouter.tsx | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx
index aac05c0..f76e596 100644
--- a/src/routes/AppRouter.tsx
+++ b/src/routes/AppRouter.tsx
@@ -28,6 +28,9 @@ import CreateSuccessPage from '../pages/auth/CreateSuccess';
 import LoadUser from '../pages/loader/LoadUser';
 import Loader from '../themed/loader/Loader';
 import ProtectedRoute from './ProtectedRoute';
+import SitesPage from '@/pages/reports/SitesPage';
+import HeatMapPage from '@/pages/reports/HeatMapPage';
+import VisitPage from '@/pages/reports/VisitPage';
 
 // Create a React Query client
 const queryClient = new QueryClient({
@@ -69,6 +72,39 @@ const router = createBrowserRouter([
     ),
     errorElement: <RouterErrorPage />,
   },
+  {
+    path: 'sites',
+    element: (
+      <ProtectedRoute>
+        <PageLayout>
+          <SitesPage />
+        </PageLayout>
+      </ProtectedRoute>
+    ),
+    errorElement: <RouterErrorPage />,
+  },
+  {
+    path: 'heat-map',
+    element: (
+      <ProtectedRoute>
+        <PageLayout>
+          <HeatMapPage />
+        </PageLayout>
+      </ProtectedRoute>
+    ),
+    errorElement: <RouterErrorPage />,
+  },
+  {
+    path: 'visits',
+    element: (
+      <ProtectedRoute>
+        <PageLayout>
+          <VisitPage />
+        </PageLayout>
+      </ProtectedRoute>
+    ),
+    errorElement: <RouterErrorPage />,
+  },
   {
     path: '/admin',
     element: <BaseAdminPage />,

From 53208f4a2916dd8c3521c8ca50aae996d3aecfcb Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Tue, 19 Nov 2024 17:33:15 -0300
Subject: [PATCH 18/36] feat: add some translations

---
 src/i18n/locales/en/translation.json | 6 ++++++
 src/i18n/locales/es/feed.json        | 5 +++++
 src/i18n/locales/es/translation.json | 6 ++++++
 src/i18n/locales/pt/translation.json | 6 ++++++
 4 files changed, 23 insertions(+)

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 1d82928..1d26b89 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -38,6 +38,12 @@
       "roles": "List of Roles",
       "teams": "List of Brigades",
       "specialPlaces": "List of Special Places"
+    },
+    "reports" : {
+      "name": "Reports",
+      "sites": "Sites",
+      "heatMap": "Heat amp",
+      "visits": "Visits"
     }
   },
   "table": {
diff --git a/src/i18n/locales/es/feed.json b/src/i18n/locales/es/feed.json
index 223753f..f4dda4c 100644
--- a/src/i18n/locales/es/feed.json
+++ b/src/i18n/locales/es/feed.json
@@ -31,5 +31,10 @@
     "greenSites": "Sitios verdes",
     "yellowSites": "Sitios amarillos",
     "redSites": "Sitios rojos"
+  },
+  "reports": {
+    "houseResume": "Reporte de sitios",
+    "heatMap": "Mapa de calor",
+    "visits": "Reporte de visitas"
   }
 }
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index 557f4a2..ad99807 100644
--- a/src/i18n/locales/es/translation.json
+++ b/src/i18n/locales/es/translation.json
@@ -37,6 +37,12 @@
       "roles": "Lista de Roles",
       "teams": "Lista de Brigadas",
       "specialPlaces": "Lista de Lugares Especiales"
+    },
+    "reports" : {
+      "name": "Reportes",
+      "sites": "Sitios",
+      "heatMap": "Mapa de calor",
+      "visits": "Visitas"
     }
   },
   "table": {
diff --git a/src/i18n/locales/pt/translation.json b/src/i18n/locales/pt/translation.json
index fa5773f..211600a 100644
--- a/src/i18n/locales/pt/translation.json
+++ b/src/i18n/locales/pt/translation.json
@@ -37,6 +37,12 @@
       "roles": "Lista de Funções",
       "teams": "Lista de Brigadas",
       "specialPlaces": "Lista de Lugares Especiais"
+    },
+    "reports" : {
+      "name": "Relatórios",
+      "sites": "Locais",
+      "heatMap": "Mapa de Calor",
+      "visits": "Visitas"
     }
   },
   "table": {

From 5e89a0525648164cd844061931466f5ae057b72f Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Tue, 19 Nov 2024 17:33:41 -0300
Subject: [PATCH 19/36] feat: add the reports itself

---
 src/pages/reports/HeatMapPage.tsx | 39 +++++++++++++++++++++++++++++++
 src/pages/reports/SitesPage.tsx   | 39 +++++++++++++++++++++++++++++++
 src/pages/reports/VisitPage.tsx   | 39 +++++++++++++++++++++++++++++++
 3 files changed, 117 insertions(+)
 create mode 100644 src/pages/reports/HeatMapPage.tsx
 create mode 100644 src/pages/reports/SitesPage.tsx
 create mode 100644 src/pages/reports/VisitPage.tsx

diff --git a/src/pages/reports/HeatMapPage.tsx b/src/pages/reports/HeatMapPage.tsx
new file mode 100644
index 0000000..53d897b
--- /dev/null
+++ b/src/pages/reports/HeatMapPage.tsx
@@ -0,0 +1,39 @@
+import { Box, Divider } from '@mui/material';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import Title from '@/themed/title/Title';
+
+const LookerStudioEmbed = () => {
+  return (
+    <div className="w-full flex">
+      <iframe
+        title="Looker Studio Report"
+        width="85%"
+        height="1180"
+        src="https://lookerstudio.google.com/embed/reporting/afe08079-b56d-4a3c-bc34-810b41a0b901/page/FcHUE"
+        className="border-0 p-0 h-min-max overscroll-none overflow-hidden"
+        sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+      />
+    </div>
+  );
+};
+
+const MyCommunity = () => {
+  const { t } = useTranslation(['feed', 'errorCodes']);
+
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      <Title type="page2" label={t('reports.heatMap')} />
+      <Divider />
+      <Box className="flex  gap-6">
+        <Box className="bg-gray-300 h-full w-full">
+          <LookerStudioEmbed />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default MyCommunity;
diff --git a/src/pages/reports/SitesPage.tsx b/src/pages/reports/SitesPage.tsx
new file mode 100644
index 0000000..b8edb3e
--- /dev/null
+++ b/src/pages/reports/SitesPage.tsx
@@ -0,0 +1,39 @@
+import { Box, Divider } from '@mui/material';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import Title from '@/themed/title/Title';
+
+const LookerStudioEmbed = () => {
+  return (
+    <div className="w-full flex">
+      <iframe
+        title="Looker Studio Report"
+        width="85%"
+        height="1180"
+        src="https://lookerstudio.google.com/embed/reporting/ca92353e-36a4-425e-821d-bdda3f450d4d/page/hhHUE"
+        className="border-0 p-0 h-min-max overscroll-none overflow-hidden"
+        sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+      />
+    </div>
+  );
+};
+
+const MyCommunity = () => {
+  const { t } = useTranslation(['feed', 'errorCodes']);
+
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      <Title type="page2" label={t('reports.houseResume')} />
+      <Divider />
+      <Box className="flex  gap-6">
+        <Box className="bg-gray-300 h-full w-full">
+          <LookerStudioEmbed />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default MyCommunity;
diff --git a/src/pages/reports/VisitPage.tsx b/src/pages/reports/VisitPage.tsx
new file mode 100644
index 0000000..81fe925
--- /dev/null
+++ b/src/pages/reports/VisitPage.tsx
@@ -0,0 +1,39 @@
+import { Box, Divider } from '@mui/material';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import Title from '@/themed/title/Title';
+
+const LookerStudioEmbed = () => {
+  return (
+    <div className="w-full flex">
+      <iframe
+        title="Looker Studio Report"
+        width="85%"
+        height="2050"
+        src="https://lookerstudio.google.com/embed/reporting/14f24d0d-8542-405a-b6e4-9f758d73ff3f/page/NqHUE"
+        className="border-0 p-0 h-min-max overscroll-none overflow-hidden"
+        sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+      />
+    </div>
+  );
+};
+
+const MyCommunity = () => {
+  const { t } = useTranslation(['feed', 'errorCodes']);
+
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      <Title type="page2" label={t('reports.visits')} />
+      <Divider />
+      <Box className="flex  gap-6">
+        <Box className="bg-gray-300 h-full w-full">
+          <LookerStudioEmbed />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default MyCommunity;

From 0c0d45bcdb53c28cfbb5e70f4312c4715f96cfe5 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Tue, 19 Nov 2024 17:34:05 -0300
Subject: [PATCH 20/36] feat: add a new icon for reports menu

---
 src/assets/icons/reports.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/assets/icons/reports.svg

diff --git a/src/assets/icons/reports.svg b/src/assets/icons/reports.svg
new file mode 100644
index 0000000..3dbb2f0
--- /dev/null
+++ b/src/assets/icons/reports.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="#57534E">
+  <path d="M11 7H13V17H11V7ZM15 11H17V17H15V11ZM7 13H9V17H7V13ZM15 4H5V20H19V8H15V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918Z"></path>
+</svg>

From 6c2469c494c8ef27b50d51735ed71ca3708395f6 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Tue, 19 Nov 2024 18:09:35 -0300
Subject: [PATCH 21/36] fix: fix translations

---
 src/i18n/locales/en/feed.json     | 5 +++++
 src/i18n/locales/pt/feed.json     | 5 +++++
 src/layout/AppBar.tsx             | 6 ------
 src/pages/reports/HeatMapPage.tsx | 4 ++--
 src/pages/reports/SitesPage.tsx   | 4 ++--
 src/pages/reports/VisitPage.tsx   | 4 ++--
 6 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/i18n/locales/en/feed.json b/src/i18n/locales/en/feed.json
index 88df867..a904979 100644
--- a/src/i18n/locales/en/feed.json
+++ b/src/i18n/locales/en/feed.json
@@ -31,5 +31,10 @@
     "greenSites": "Green sites",
     "yellowSites": "Yellow sites",
     "redSites": "Red sites"
+  },
+  "reports": {
+    "houseResume": "Site Report",
+    "heatMap": "Heat Map",
+    "visits": "Visit Report"
   }
 }
diff --git a/src/i18n/locales/pt/feed.json b/src/i18n/locales/pt/feed.json
index efb1673..8a039ee 100644
--- a/src/i18n/locales/pt/feed.json
+++ b/src/i18n/locales/pt/feed.json
@@ -31,5 +31,10 @@
     "greenSites": "Locais verdes",
     "yellowSites": "Locais amarelos",
     "redSites": "Locais vermelhos"
+  },
+  "reports": {
+    "houseResume": "Relatório de locais",
+    "heatMap": "Mapa de calor",
+    "visits": "Relatório de visitas"
   }
 }
diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
index 4134d56..177f8e8 100644
--- a/src/layout/AppBar.tsx
+++ b/src/layout/AppBar.tsx
@@ -92,12 +92,6 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
     setSearchText(event.target.value);
   };
 
-  const [open, setOpen] = React.useState(true);
-
-  const handleClick = () => {
-    setOpen(!open);
-  };
-
   const [openMenus, setOpenMenus] = React.useState<{ [key: string]: boolean }>({
     settingsMenu: false,
     reportsMenu: false,
diff --git a/src/pages/reports/HeatMapPage.tsx b/src/pages/reports/HeatMapPage.tsx
index 53d897b..9241bb9 100644
--- a/src/pages/reports/HeatMapPage.tsx
+++ b/src/pages/reports/HeatMapPage.tsx
@@ -18,7 +18,7 @@ const LookerStudioEmbed = () => {
   );
 };
 
-const MyCommunity = () => {
+const HeatMap = () => {
   const { t } = useTranslation(['feed', 'errorCodes']);
 
   useEffect(() => {}, []);
@@ -36,4 +36,4 @@ const MyCommunity = () => {
   );
 };
 
-export default MyCommunity;
+export default HeatMap;
diff --git a/src/pages/reports/SitesPage.tsx b/src/pages/reports/SitesPage.tsx
index b8edb3e..16b8de2 100644
--- a/src/pages/reports/SitesPage.tsx
+++ b/src/pages/reports/SitesPage.tsx
@@ -18,7 +18,7 @@ const LookerStudioEmbed = () => {
   );
 };
 
-const MyCommunity = () => {
+const Site = () => {
   const { t } = useTranslation(['feed', 'errorCodes']);
 
   useEffect(() => {}, []);
@@ -36,4 +36,4 @@ const MyCommunity = () => {
   );
 };
 
-export default MyCommunity;
+export default Site;
diff --git a/src/pages/reports/VisitPage.tsx b/src/pages/reports/VisitPage.tsx
index 81fe925..7632f9b 100644
--- a/src/pages/reports/VisitPage.tsx
+++ b/src/pages/reports/VisitPage.tsx
@@ -18,7 +18,7 @@ const LookerStudioEmbed = () => {
   );
 };
 
-const MyCommunity = () => {
+const Visit = () => {
   const { t } = useTranslation(['feed', 'errorCodes']);
 
   useEffect(() => {}, []);
@@ -36,4 +36,4 @@ const MyCommunity = () => {
   );
 };
 
-export default MyCommunity;
+export default Visit;

From 559137b8fd8d4e0fa17d5b3190c8cb23187b4114 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Tue, 19 Nov 2024 22:05:18 -0300
Subject: [PATCH 22/36] fix: fix labels and the team form(fields orders)

---
 src/components/dialog/CreateTeamDialog.tsx | 30 +++++++++++-----------
 src/i18n/locales/en/admin.json             | 12 ++++-----
 src/i18n/locales/en/translation.json       |  4 +--
 src/i18n/locales/es/admin.json             | 12 ++++-----
 src/i18n/locales/es/translation.json       |  4 +--
 src/i18n/locales/pt/admin.json             | 10 ++++----
 src/i18n/locales/pt/translation.json       |  6 ++---
 7 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/dialog/CreateTeamDialog.tsx b/src/components/dialog/CreateTeamDialog.tsx
index 2af6d0b..431e6aa 100644
--- a/src/components/dialog/CreateTeamDialog.tsx
+++ b/src/components/dialog/CreateTeamDialog.tsx
@@ -204,12 +204,12 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
             </Grid>
             <Grid item xs={12} sm={12}>
               <FormSelect
-                name="organizationId"
+                name="cityId"
                 className="mt-2"
-                label={t('admin:teams.form.organization')}
-                loading={loadingOrganizations}
-                options={organizationOptions}
-                placeholder={t('admin:teams.form.organization_placeholder')}
+                label={t('admin:teams.form.city')}
+                loading={loadingCities}
+                options={cityOptions}
+                placeholder={t('admin:teams.form.city_placeholder')}
               />
             </Grid>
             <Grid item xs={12} sm={12}>
@@ -222,16 +222,6 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
                 placeholder={t('admin:teams.form.sector_placeholder')}
               />
             </Grid>
-            <Grid item xs={12} sm={12}>
-              <FormSelect
-                name="cityId"
-                className="mt-2"
-                label={t('admin:teams.form.city')}
-                loading={loadingCities}
-                options={cityOptions}
-                placeholder={t('admin:teams.form.city_placeholder')}
-              />
-            </Grid>
             <Grid item xs={12} sm={12}>
               <FormSelect
                 name="wedgeId"
@@ -242,6 +232,16 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
                 placeholder={t('admin:teams.form.wedge_placeholder')}
               />
             </Grid>
+            <Grid item xs={12} sm={12}>
+              <FormSelect
+                name="organizationId"
+                className="mt-2"
+                label={t('admin:teams.form.organization')}
+                loading={loadingOrganizations}
+                options={organizationOptions}
+                placeholder={t('admin:teams.form.organization_placeholder')}
+              />
+            </Grid>
           </Grid>
 
           <div className="mt-8 grid grid-cols-1 gap-4 md:flex md:justify-end md:gap-0">
diff --git a/src/i18n/locales/en/admin.json b/src/i18n/locales/en/admin.json
index 1fc1953..f1f060c 100644
--- a/src/i18n/locales/en/admin.json
+++ b/src/i18n/locales/en/admin.json
@@ -35,12 +35,12 @@
   "teams": {
     "create_team": "Create Brigade",
     "form": {
-      "name": "Name",
+      "name": "Brigade name",
       "name_placeholder": "Enter a name",
-      "members": "Members",
-      "members_placeholder": "Select members",
-      "team_leader": "Team Leader",
-      "team_leader_placeholder": "Select team leader",
+      "members": "Brigadists",
+      "members_placeholder": "Select brigadists",
+      "team_leader": "Team Facilitator",
+      "team_leader_placeholder": "Select team facilitator",
       "organization": "Organization",
       "organization_placeholder": "Select organization",
       "sector": "Sector",
@@ -51,7 +51,7 @@
       "city_placeholder": "Select city"
     },
     "edit": {
-      "edit_team": "Assign team members",
+      "edit_team": "Assign team brigadists",
       "success": "Brigade updated successfully"
     }
   }
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 1d26b89..e782397 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -82,8 +82,8 @@
     "sector": "Sector",
     "wedge": "Wedge",
     "members": "Members",
-    "leader": "Leader",
-    "memberCount": "Number of members",
+    "leader": "Facilitator",
+    "memberCount": "Number of brigadists",
     "city": "City"
   },
   "options": {
diff --git a/src/i18n/locales/es/admin.json b/src/i18n/locales/es/admin.json
index e059bec..a252b44 100644
--- a/src/i18n/locales/es/admin.json
+++ b/src/i18n/locales/es/admin.json
@@ -35,12 +35,12 @@
   "teams": {
     "create_team": "Crear Brigada",
     "form": {
-      "name": "Nombre",
+      "name": "Nombre de la brigada",
       "name_placeholder": "Ingresa un nombre",
-      "members": "Miembros",
-      "members_placeholder": "Selecciona a los miembros",
-      "team_leader": "Líder del equipo",
-      "team_leader_placeholder": "Selecciona un líder del equipo",
+      "members": "Brigadistas",
+      "members_placeholder": "Selecciona a los brigadistas",
+      "team_leader": "Facilitador del equipo",
+      "team_leader_placeholder": "Selecciona un facilitador del equipo",
       "organization": "Organización",
       "organization_placeholder": "Selecciona una organización",
       "sector": "Sector",
@@ -51,7 +51,7 @@
       "city_placeholder": "Selecciona una ciudad"
     },
     "edit": {
-      "edit_team": "Asignar miembros del equipo",
+      "edit_team": "Asignar brigadistas del equipo",
       "success": "Brigada actualizada con éxito"
     }
   }
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index ad99807..5852bfd 100644
--- a/src/i18n/locales/es/translation.json
+++ b/src/i18n/locales/es/translation.json
@@ -81,8 +81,8 @@
     "sector": "Sector",
     "wedge": "Cuña",
     "members": "Miembros",
-    "leader": "Líder",
-    "memberCount": "Número de miembros",
+    "leader": "Facilitador",
+    "memberCount": "Número de brigadistas",
     "city": "Ciudad"
   },
   "options": {
diff --git a/src/i18n/locales/pt/admin.json b/src/i18n/locales/pt/admin.json
index 407c0ea..daf6146 100644
--- a/src/i18n/locales/pt/admin.json
+++ b/src/i18n/locales/pt/admin.json
@@ -35,12 +35,12 @@
   "teams": {
     "create_team": "Criar Brigada",
     "form": {
-      "name": "Nome",
+      "name": "Nome da brigada",
       "name_placeholder": "Insira um nome",
-      "members": "Membros",
-      "members_placeholder": "Selecione membros",
-      "team_leader": "Líder da equipe",
-      "team_leader_placeholder": "Selecione o líder da equipe",
+      "members": "Brigadistas",
+      "members_placeholder": "Selecione brigadistas",
+      "team_leader": "Facilitador da equipe",
+      "team_leader_placeholder": "Selecione o facilitador da equipe",
       "organization": "Organização",
       "organization_placeholder": "Selecione a organização",
       "sector": "Setor",
diff --git a/src/i18n/locales/pt/translation.json b/src/i18n/locales/pt/translation.json
index 211600a..259e2ad 100644
--- a/src/i18n/locales/pt/translation.json
+++ b/src/i18n/locales/pt/translation.json
@@ -80,9 +80,9 @@
     "organization": "Organização",
     "sector": "Setor",
     "wedge": "Subsetor",
-    "members": "Membros",
-    "leader": "Líder",
-    "memberCount": "Número de membros",
+    "members": "Brigadistas",
+    "leader": "Facilitador",
+    "memberCount": "Número de brigadistas",
     "city": "Cidade"
   },
   "options": {

From 4593b009081040388b48a17ebc6872191ba52f55 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Tue, 19 Nov 2024 22:20:16 -0300
Subject: [PATCH 23/36] fix: change all labels and text from denguechat+ to
 DengueChatPlus

---
 README.md                            |  2 +-
 index.html                           |  2 +-
 src/App.tsx                          |  2 +-
 src/i18n/locales/en/splash.json      | 12 ++++++------
 src/i18n/locales/en/translation.json |  2 +-
 src/i18n/locales/es/splash.json      | 12 ++++++------
 src/i18n/locales/es/translation.json |  2 +-
 src/i18n/locales/pt/splash.json      | 14 +++++++-------
 src/i18n/locales/pt/translation.json |  2 +-
 9 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index 4d5ad42..3d43d40 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# DengueChat+
+# DengueChatPlus
 
 Web project for DengueChat
 
diff --git a/index.html b/index.html
index d161e46..ce30f63 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
     />
     <link rel="icon" type="image/svg+xml" href="/src/assets/images/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DengueChat+</title>
+    <title>DengueChatPlus</title>
   </head>
   <body>
     <div id="root-app"></div>
diff --git a/src/App.tsx b/src/App.tsx
index 20bff9c..2203a7f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 const App: React.FC = () => (
   <>
     <div className="text-center selection:bg-green-900 bg-[#282c34] text-white min-h-screen pt-32" />
-    <div>DengueChat+</div>
+    <div>DengueChatPlus</div>
   </>
 );
 
diff --git a/src/i18n/locales/en/splash.json b/src/i18n/locales/en/splash.json
index db6a38b..43cda46 100644
--- a/src/i18n/locales/en/splash.json
+++ b/src/i18n/locales/en/splash.json
@@ -1,13 +1,13 @@
 {
   "cta": {
     "learnMore": "Learn more",
-    "whatIs": "What is DengueChat+",
+    "whatIs": "What is DengueChatPlus",
     "register": "Register",
     "watchMore": "Watch more videos"
   },
   "main": {
     "joinTeam": "Join your community's team",
-    "dengueChatPlus": "DengueChat+",
+    "dengueChatPlus": "DengueChatPlus",
     "citizensCopy": "Citizens in the fight against dengue and mosquitoes."
   },
   "participants": {
@@ -15,16 +15,16 @@
     "actorsInvolved": "See the actors involved in the community of Managua, Nicaragua"
   },
   "cities": {
-    "citiesWithDengueChat": "Cities with DengueChat+"
+    "citiesWithDengueChat": "Cities with DengueChatPlus"
   },
   "community": {
-    "dengueChatCommunity": "Community in DengueChat+",
-    "communityInvolvement": "DengueChat+ involves communities in the fight against dengue fever",
+    "dengueChatCommunity": "Community in DengueChatPlus",
+    "communityInvolvement": "DengueChatPlus involves communities in the fight against dengue fever",
     "chatWithMembers": "Chat with other community members to report and control mosquito breeding sites",
     "joinTeams": "Join teams to fight dengue and earn points"
   },
   "data": {
-    "dengueChatData": "Data in DengueChat+",
+    "dengueChatData": "Data in DengueChatPlus",
     "analyzeAndMeasure": "Organize, analyze, and measure your community's progress in reducing Aedes mosquitoes, the vector of the dengue virus",
     "versatileTools": "Versatile tools to analyze the spread or containment of dengue vectors",
     "generateReports": "At the community or city level, generate reports to motivate leaders"
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index e782397..6c140ab 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -96,7 +96,7 @@
   },
   "footer": {
     "userGuide": "User Guide",
-    "about": "About DengueChat+",
+    "about": "About DengueChatPlus",
     "mosquito": "The Mosquito",
     "faqs": "Frequently Asked Questions"
   }
diff --git a/src/i18n/locales/es/splash.json b/src/i18n/locales/es/splash.json
index 573c3af..262758a 100644
--- a/src/i18n/locales/es/splash.json
+++ b/src/i18n/locales/es/splash.json
@@ -1,13 +1,13 @@
 {
   "cta": {
     "learnMore": "Aprende más",
-    "whatIs": "Qué es DengueChat+",
+    "whatIs": "Qué es DengueChatPlus",
     "register": "Registrarse",
     "watchMore": "Ver más videos"
   },
   "main": {
     "joinTeam": "Únete al equipo de tu comunidad",
-    "dengueChatPlus": "DengueChat+",
+    "dengueChatPlus": "DengueChatPlus",
     "citizensCopy": "Ciudadanos en el combate contra el dengue y los zancudos."
   },
   "participants": {
@@ -15,16 +15,16 @@
     "actorsInvolved": "Ve a los actores involucrados en la comunidad de Managua, Nicaragua"
   },
   "cities": {
-    "citiesWithDengueChat": "Ciudades con DengueChat+"
+    "citiesWithDengueChat": "Ciudades con DengueChatPlus"
   },
   "community": {
-    "dengueChatCommunity": "Comunidad en DengueChat+",
-    "communityInvolvement": "DengueChat+ involucra a las comunidades en la lucha contra el dengue",
+    "dengueChatCommunity": "Comunidad en DengueChatPlus",
+    "communityInvolvement": "DengueChatPlus involucra a las comunidades en la lucha contra el dengue",
     "chatWithMembers": "Chatea con otros miembros de la comunidad para reportar y controlar criaderos de mosquitos",
     "joinTeams": "Únete a equipos para combatir el dengue y gane puntos"
   },
   "data": {
-    "dengueChatData": "Datos en DengueChat+",
+    "dengueChatData": "Datos en DengueChatPlus",
     "analyzeAndMeasure": "Organiza, analiza y mide el progreso de su comunidad en la reducción del Aedes, el mosquito transmisor de los viruses del dengue",
     "versatileTools": "Herramientas versátiles para analizar la expansión o el contenimiento del vector del dengue",
     "generateReports": "Al nivel de la comunidad o de la ciudad generan reportes para motivar a líderes"
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index 5852bfd..0153e09 100644
--- a/src/i18n/locales/es/translation.json
+++ b/src/i18n/locales/es/translation.json
@@ -95,7 +95,7 @@
   },
   "footer": {
     "userGuide": "Guía de Usuario",
-    "about": "Sobre DengueChat+",
+    "about": "Sobre DengueChatPlus",
     "mosquito": "El Zancudo",
     "faqs": "Preguntas Frecuentes"
   }
diff --git a/src/i18n/locales/pt/splash.json b/src/i18n/locales/pt/splash.json
index 595b461..2b040fb 100644
--- a/src/i18n/locales/pt/splash.json
+++ b/src/i18n/locales/pt/splash.json
@@ -1,13 +1,13 @@
 {
   "cta": {
     "learnMore": "Saber mais",
-    "whatIs": "O que é DengueChat+",
+    "whatIs": "O que é DengueChatPlus",
     "register": "Cadastar",
     "watchMore": "Ver mais vídeos"
   },
   "main": {
     "joinTeam": "Junte-se à equipa da sua comunidade",
-    "dengueChatPlus": "DengueChat+",
+    "dengueChatPlus": "DengueChatPlus",
     "citizensCopy": "Cidadãos na luta contra a dengue e os mosquitos."
   },
   "participants": {
@@ -15,16 +15,16 @@
     "actorsInvolved": "Veja os atores envolvidos na comunidade de Manágua, Nicarágua"
   },
   "cities": {
-    "citiesWithDengueChat": "Cidades com DengueChat+"
+    "citiesWithDengueChat": "Cidades com DengueChatPlus"
   },
   "community": {
-    "dengueChatCommunity": "Comunidade no DengueChat+",
-    "communityInvolvement": "DengueChat+ envolve as comunidades na luta contra a febre da dengue",
+    "dengueChatCommunity": "Comunidade no DengueChatPlus",
+    "communityInvolvement": "DengueChatPlus envolve as comunidades na luta contra a febre da dengue",
     "chatWithMembers": "Converse com outros membros da comunidade para reportar e controlar criadouros de mosquitos",
     "joinTeams": "Junte-se a equipes para combater dengue"
   },
   "data": {
-    "dengueChatData": "Dados no DengueChat+",
+    "dengueChatData": "Dados no DengueChatPlus",
     "analyzeAndMeasure": "Organize, analise e meça o progresso da sua comunidade na redução do Aedes, o mosquito transmissor dos vírus do dengue",
     "versatileTools": "Ferramentas versáteis para analisar a expansão ou contenção do vetor do dengue",
     "generateReports": "Ao nível da comunidade ou da cidade, gere relatórios para motivar líderes"
@@ -35,7 +35,7 @@
   },
   "footer": {
     "userGuide": "Guia do Utilizador",
-    "about": "Sobre o DengueChat+",
+    "about": "Sobre o DengueChatPlus",
     "mosquito": "O Mosquito",
     "faqs": "Perguntas Frequentes"
   }
diff --git a/src/i18n/locales/pt/translation.json b/src/i18n/locales/pt/translation.json
index 259e2ad..7eae533 100644
--- a/src/i18n/locales/pt/translation.json
+++ b/src/i18n/locales/pt/translation.json
@@ -95,7 +95,7 @@
   },
   "footer": {
     "userGuide": "Guia do Usuário",
-    "about": "Sobre o DengueChat+",
+    "about": "Sobre o DengueChatPlus",
     "mosquito": "O Mosquito",
     "faqs": "Perguntas Frequentes"
   }

From 61b1af6a63541007100ebc358728842579fc8411 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Tue, 26 Nov 2024 18:08:45 +0100
Subject: [PATCH 24/36] feat: add visits list

---
 src/assets/icons/fact-check.svg           |   3 +
 src/components/icon/index.tsx             |   2 +
 src/components/list/FilteredDataTable.tsx |   7 +-
 src/constants/index.ts                    |   3 +-
 src/i18n/locales/en/splash.json           |   6 ++
 src/i18n/locales/en/translation.json      |  15 +++-
 src/i18n/locales/es/auth.json             |   3 +-
 src/i18n/locales/es/splash.json           |   6 ++
 src/i18n/locales/es/translation.json      |  18 +++-
 src/i18n/locales/pt/auth.json             |   3 +-
 src/i18n/locales/pt/translation.json      |  18 +++-
 src/layout/AppBar.tsx                     | 103 ++++++++++++----------
 src/pages/visits/VisitsPage.tsx           |  71 +++++++++++++++
 src/routes/AppRouter.tsx                  |  37 ++++----
 src/schemas/entities.ts                   |  11 +++
 src/themed/table/DataTable.tsx            |   6 +-
 16 files changed, 230 insertions(+), 82 deletions(-)
 create mode 100644 src/assets/icons/fact-check.svg
 create mode 100644 src/pages/visits/VisitsPage.tsx

diff --git a/src/assets/icons/fact-check.svg b/src/assets/icons/fact-check.svg
new file mode 100644
index 0000000..abd9652
--- /dev/null
+++ b/src/assets/icons/fact-check.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 21.9175C3.45 21.9175 2.97917 21.7216 2.5875 21.33C2.19583 20.9383 2 20.4675 2 19.9175V5.91748C2 5.36748 2.19583 4.89665 2.5875 4.50498C2.97917 4.11331 3.45 3.91748 4 3.91748H20C20.55 3.91748 21.0208 4.11331 21.4125 4.50498C21.8042 4.89665 22 5.36748 22 5.91748V19.9175C22 20.4675 21.8042 20.9383 21.4125 21.33C21.0208 21.7216 20.55 21.9175 20 21.9175H4ZM4 19.9175H20V5.91748H4V19.9175ZM5 17.9175H10V15.9175H5V17.9175ZM14.55 15.9175L19.5 10.9675L18.075 9.54248L14.55 13.0925L13.125 11.6675L11.725 13.0925L14.55 15.9175ZM5 13.9175H10V11.9175H5V13.9175ZM5 9.91748H10V7.91748H5V9.91748Z" fill="#57534E"/>
+</svg>
diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
index 81d8de0..86e6ad7 100644
--- a/src/components/icon/index.tsx
+++ b/src/components/icon/index.tsx
@@ -15,6 +15,7 @@ import Community from '@/assets/icons/community.svg?react';
 import Data from '@/assets/icons/data.svg?react';
 import Register from '@/assets/icons/register.svg?react';
 import Export from '@/assets/icons/export.svg?react';
+import FactCheck from '@/assets/icons/fact-check.svg?react';
 import { COLORS } from '@/constants';
 
 const IconMap = {
@@ -29,6 +30,7 @@ const IconMap = {
   Comment,
   Trash,
   ThumbsUp,
+  FactCheck,
 };
 
 const Icon = ({
diff --git a/src/components/list/FilteredDataTable.tsx b/src/components/list/FilteredDataTable.tsx
index afb7868..2525121 100644
--- a/src/components/list/FilteredDataTable.tsx
+++ b/src/components/list/FilteredDataTable.tsx
@@ -15,7 +15,7 @@ import { deserialize } from 'jsonapi-fractal';
 import { useSnackbar } from 'notistack';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PAGE_SIZES } from '../../constants';
+import { PAGE_SIZES, PageSizes } from '../../constants';
 import { PaginationInput } from '../../schemas/entities';
 import Button from '../../themed/button/Button';
 import DataTable, { DataTableProps, Order } from '../../themed/table/DataTable';
@@ -32,6 +32,7 @@ interface FilteredDataTableProps<T> extends Omit<DataTableProps<T>, 'rows'> {
   updateControl?: number;
   actions?: (row: T, loading?: boolean) => JSX.Element;
   create?: () => JSX.Element;
+  pageSize?: PageSizes;
 }
 
 interface FilterOptionsObject {
@@ -49,6 +50,7 @@ export default function FilteredDataTable<T>({
   updateControl,
   actions,
   create,
+  pageSize = PAGE_SIZES[0],
   ...otherDataTableProps
 }: FilteredDataTableProps<T>) {
   const { t } = useTranslation('translation');
@@ -74,7 +76,7 @@ export default function FilteredDataTable<T>({
 
   const [payload, setPayload] = useState<PaginationInput>({
     'page[number]': 1,
-    'page[size]': PAGE_SIZES[0],
+    'page[size]': pageSize,
     sort: defaultSort,
     order: defaultSort ? defaultOrder : undefined,
   });
@@ -257,6 +259,7 @@ export default function FilteredDataTable<T>({
         }}
         isLoading={loading}
         actions={actions}
+        pageSize={pageSize}
       />
     </>
   );
diff --git a/src/constants/index.ts b/src/constants/index.ts
index ff3487d..7eb9019 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -22,7 +22,8 @@ export const ACCESS_TOKEN_LOCAL_STORAGE_KEY = 'DENGUECHAT_USER_ACCESS_TOKEN';
 export const REFRESH_TOKEN_LOCAL_STORAGE_KEY = 'DENGUECHAT_USER_REFRESH_TOKEN';
 export const LANG_STORAGE_KEY = 'DENGUECHAT_LANG';
 
-export const PAGE_SIZES = [5, 10, 25];
+export const PAGE_SIZES = [5, 10, 15, 25] as const;
+export type PageSizes = (typeof PAGE_SIZES)[number];
 
 export const DISPATCH_ACTIONS = {
   SET_USER: 'SET_USER',
diff --git a/src/i18n/locales/en/splash.json b/src/i18n/locales/en/splash.json
index 43cda46..093f871 100644
--- a/src/i18n/locales/en/splash.json
+++ b/src/i18n/locales/en/splash.json
@@ -32,5 +32,11 @@
   "register": {
     "platformRegister": "Register on the platform",
     "joinCommunity": "Join your community and fight against the Aedes aegypti mosquito."
+  },
+  "footer": {
+    "about": "",
+    "faqs": "",
+    "mosquito": "",
+    "userGuide": ""
   }
 }
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 6c140ab..f37bea9 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -31,15 +31,17 @@
     "organizations": "Organizations",
     "breedingSites": "Breeding Sites",
     "cities": "Cities",
+    "visits": "Visits",
     "descriptions": {
       "organizations": "List of Organizations",
       "cities": "List of Cities",
       "users": "List of Users",
       "roles": "List of Roles",
       "teams": "List of Brigades",
-      "specialPlaces": "List of Special Places"
+      "specialPlaces": "List of Special Places",
+      "visits": "List of Visits"
     },
-    "reports" : {
+    "reports": {
       "name": "Reports",
       "sites": "Sites",
       "heatMap": "Heat amp",
@@ -84,7 +86,14 @@
     "members": "Members",
     "leader": "Facilitator",
     "memberCount": "Number of brigadists",
-    "city": "City"
+    "city": "City",
+    "brigade": "Brigade",
+    "brigadist": "Brigadist",
+    "site": "Site",
+    "visitStatus": "Visit Status",
+    "visitedAt": "Visited at",
+    "team": "Brigade",
+    "house": "Site"
   },
   "options": {
     "notDefined": "Not Defined",
diff --git a/src/i18n/locales/es/auth.json b/src/i18n/locales/es/auth.json
index 805eb87..c9d1abc 100644
--- a/src/i18n/locales/es/auth.json
+++ b/src/i18n/locales/es/auth.json
@@ -16,6 +16,7 @@
     "email": "Por favor ingrese un correo electrónico válido",
     "password": "Por favor ingrese una contraseña válida",
     "login": "Algo falló. Por favor intente de nuevo.",
-    "empty": "Por favor llene todos los campos"
+    "empty": "Por favor llene todos los campos",
+    "generic": ""
   }
 }
diff --git a/src/i18n/locales/es/splash.json b/src/i18n/locales/es/splash.json
index 262758a..5c7facc 100644
--- a/src/i18n/locales/es/splash.json
+++ b/src/i18n/locales/es/splash.json
@@ -32,5 +32,11 @@
   "register": {
     "platformRegister": "Regístrate en la plataforma",
     "joinCommunity": "Únete a tu comunidad y lucha contra el mosquito del Aedes aegypti."
+  },
+  "footer": {
+    "about": "",
+    "faqs": "",
+    "mosquito": "",
+    "userGuide": ""
   }
 }
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index 0153e09..52fc5ae 100644
--- a/src/i18n/locales/es/translation.json
+++ b/src/i18n/locales/es/translation.json
@@ -36,14 +36,17 @@
       "users": "Lista de Usuarios",
       "roles": "Lista de Roles",
       "teams": "Lista de Brigadas",
-      "specialPlaces": "Lista de Lugares Especiales"
+      "specialPlaces": "Lista de Lugares Especiales",
+      "visits": "Lista de Visitas"
     },
-    "reports" : {
+    "reports": {
       "name": "Reportes",
       "sites": "Sitios",
       "heatMap": "Mapa de calor",
       "visits": "Visitas"
-    }
+    },
+    "visits": "Visitas",
+    "homes": "Sites"
   },
   "table": {
     "actions": {
@@ -83,7 +86,14 @@
     "members": "Miembros",
     "leader": "Facilitador",
     "memberCount": "Número de brigadistas",
-    "city": "Ciudad"
+    "city": "Ciudad",
+    "brigade": "Brigada",
+    "brigadist": "Brigadista",
+    "site": "Sitio",
+    "visitStatus": "Estado de Visita",
+    "visitedAt": "Visitado en",
+    "team": "Brigada",
+    "house": "Sitio"
   },
   "options": {
     "notDefined": "No definido",
diff --git a/src/i18n/locales/pt/auth.json b/src/i18n/locales/pt/auth.json
index 6905c45..60e4e5a 100644
--- a/src/i18n/locales/pt/auth.json
+++ b/src/i18n/locales/pt/auth.json
@@ -16,6 +16,7 @@
     "email": "Por favor, insira um e-mail válido",
     "password": "Por favor, insira uma senha válida",
     "login": "Algo deu errado. Por favor, tente novamente.",
-    "empty": "Por favor, preencha todos os campos"
+    "empty": "Por favor, preencha todos os campos",
+    "generic": ""
   }
 }
diff --git a/src/i18n/locales/pt/translation.json b/src/i18n/locales/pt/translation.json
index 7eae533..024b9e1 100644
--- a/src/i18n/locales/pt/translation.json
+++ b/src/i18n/locales/pt/translation.json
@@ -36,14 +36,17 @@
       "users": "Lista de Utilizadores",
       "roles": "Lista de Funções",
       "teams": "Lista de Brigadas",
-      "specialPlaces": "Lista de Lugares Especiais"
+      "specialPlaces": "Lista de Lugares Especiais",
+      "visits": "Visitas"
     },
-    "reports" : {
+    "reports": {
       "name": "Relatórios",
       "sites": "Locais",
       "heatMap": "Mapa de Calor",
       "visits": "Visitas"
-    }
+    },
+    "visits": "Visitas",
+    "homes": "Locals"
   },
   "table": {
     "actions": {
@@ -83,7 +86,14 @@
     "members": "Brigadistas",
     "leader": "Facilitador",
     "memberCount": "Número de brigadistas",
-    "city": "Cidade"
+    "city": "Cidade",
+    "brigade": "Brigada",
+    "brigadist": "Brigadista",
+    "site": "Local",
+    "visitStatus": "Status da Visita",
+    "visitedAt": "Visitado em",
+    "team": "Brigada",
+    "house": "Local"
   },
   "options": {
     "notDefined": "Não definido",
diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
index 177f8e8..342b479 100644
--- a/src/layout/AppBar.tsx
+++ b/src/layout/AppBar.tsx
@@ -50,9 +50,9 @@ export interface AppBarProps {
 
 // routes
 const ADMIN_USERS = '/admin/users';
-const ADMIN_SITES = '/sites';
-const ADMIN_HEATMAP = '/heat-map';
-const ADMIN_VISITS = '/visits';
+const ADMIN_SITES = '/reports/sites';
+const ADMIN_HEATMAP = '/reports/heat-map';
+const ADMIN_VISITS = '/reports/visits';
 const ADMIN_ROLES = '/admin/roles';
 const ADMIN_ORGANIZATIONS = '/admin/organizations';
 const ADMIN_CITIES = '/admin/cities';
@@ -61,6 +61,7 @@ const ADMIN_TEAMS = '/admin/teams';
 
 const MY_CITY = '/my-city';
 const MY_COMMUNITY = '/my-community';
+const VISITS = '/visits';
 
 export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
   const { t } = useTranslation('translation');
@@ -157,6 +158,57 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
             </ListItemIcon>
             <ListItemText primary={<Text type="menuItem">{t('menu.breedingSites')}</Text>} />
           </ListItemButton>
+          <ListItemButton component={Link} to={VISITS} selected={pathname.includes(VISITS)}>
+            <ListItemIcon>
+              <Icon type="FactCheck" />
+            </ListItemIcon>
+            <ListItemText primary={<Text type="menuItem">{t('menu.visits')}</Text>} />
+          </ListItemButton>
+          <ProtectedView
+            hasSomePermission={[ROLES_INDEX, ORGANIZATIONS_INDEX, USERS_INDEX, CITIES_INDEX, SPECIAL_PLACES_INDEX]}
+          >
+            <ListItemButton onClick={() => genericHandleClick('reportsMenu')}>
+              <ListItemIcon>
+                <img src={ReportsIcon} alt="reports-icon" />
+              </ListItemIcon>
+              <ListItemText primary={<Text type="menuItem">{t('menu.reports.name')}</Text>} />
+              {openMenus.reportsMenu ? <ExpandLess /> : <ExpandMore />}
+            </ListItemButton>
+            <Collapse in={openMenus.reportsMenu} timeout="auto" unmountOnExit>
+              <List component="div" disablePadding>
+                <ProtectedView hasPermission={[USERS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_SITES}
+                    selected={pathname.includes(ADMIN_SITES)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.sites')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[USERS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_HEATMAP}
+                    selected={pathname.includes(ADMIN_HEATMAP)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.heatMap')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+                <ProtectedView hasPermission={[USERS_INDEX]}>
+                  <ListItemButton
+                    sx={{ pl: 4 }}
+                    component={Link}
+                    to={ADMIN_VISITS}
+                    selected={pathname.includes(ADMIN_VISITS)}
+                  >
+                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.visits')}</Text>} />
+                  </ListItemButton>
+                </ProtectedView>
+              </List>
+            </Collapse>
+          </ProtectedView>
           <ProtectedView
             hasSomePermission={[ROLES_INDEX, ORGANIZATIONS_INDEX, USERS_INDEX, CITIES_INDEX, SPECIAL_PLACES_INDEX]}
           >
@@ -232,51 +284,6 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
               </List>
             </Collapse>
           </ProtectedView>
-          <ProtectedView
-            hasSomePermission={[ROLES_INDEX, ORGANIZATIONS_INDEX, USERS_INDEX, CITIES_INDEX, SPECIAL_PLACES_INDEX]}
-          >
-            <ListItemButton onClick={() => genericHandleClick('reportsMenu')}>
-              <ListItemIcon>
-                <img src={ReportsIcon} alt="reports-icon" />
-              </ListItemIcon>
-              <ListItemText primary={<Text type="menuItem">{t('menu.reports.name')}</Text>} />
-              {openMenus.reportsMenu ? <ExpandLess /> : <ExpandMore />}
-            </ListItemButton>
-            <Collapse in={openMenus.reportsMenu} timeout="auto" unmountOnExit>
-              <List component="div" disablePadding>
-                <ProtectedView hasPermission={[USERS_INDEX]}>
-                  <ListItemButton
-                    sx={{ pl: 4 }}
-                    component={Link}
-                    to={ADMIN_SITES}
-                    selected={pathname.includes(ADMIN_SITES)}
-                  >
-                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.sites')}</Text>} />
-                  </ListItemButton>
-                </ProtectedView>
-                <ProtectedView hasPermission={[USERS_INDEX]}>
-                  <ListItemButton
-                    sx={{ pl: 4 }}
-                    component={Link}
-                    to={ADMIN_HEATMAP}
-                    selected={pathname.includes(ADMIN_HEATMAP)}
-                  >
-                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.heatMap')}</Text>} />
-                  </ListItemButton>
-                </ProtectedView>
-                <ProtectedView hasPermission={[USERS_INDEX]}>
-                  <ListItemButton
-                    sx={{ pl: 4 }}
-                    component={Link}
-                    to={ADMIN_VISITS}
-                    selected={pathname.includes(ADMIN_VISITS)}
-                  >
-                    <ListItemText primary={<Text type="menuItem">{t('menu.reports.visits')}</Text>} />
-                  </ListItemButton>
-                </ProtectedView>
-              </List>
-            </Collapse>
-          </ProtectedView>
         </List>
       </Box>
       <Box>
diff --git a/src/pages/visits/VisitsPage.tsx b/src/pages/visits/VisitsPage.tsx
new file mode 100644
index 0000000..739aab4
--- /dev/null
+++ b/src/pages/visits/VisitsPage.tsx
@@ -0,0 +1,71 @@
+import { useTranslation } from 'react-i18next';
+import FilteredDataTable from '../../components/list/FilteredDataTable';
+import { Visit } from '../../schemas/entities';
+import { HeadCell } from '../../themed/table/DataTable';
+
+const headCells: HeadCell<Visit>[] = [
+  {
+    id: 'id',
+    label: 'id',
+    sortable: true,
+  },
+  {
+    id: 'visitedAt',
+    label: 'visitedAt',
+    type: 'date',
+    sortable: true,
+  },
+  {
+    id: 'city',
+    label: 'city',
+    filterable: true,
+    sortable: false,
+  },
+  {
+    id: 'wedge',
+    label: 'wedge',
+    filterable: true,
+    sortable: true,
+  },
+  {
+    id: 'team',
+    label: 'brigade',
+    filterable: true,
+    sortable: true,
+  },
+  {
+    id: 'brigadist',
+    label: 'brigadist',
+    filterable: true,
+    sortable: true,
+  },
+  {
+    id: 'house',
+    label: 'site',
+    filterable: true,
+    sortable: true,
+  },
+  {
+    id: 'visitStatus',
+    label: 'visitStatus',
+    filterable: true,
+    sortable: true,
+  },
+];
+
+const VisitDataTable = FilteredDataTable<Visit>;
+
+export default function VisitsList() {
+  const { t } = useTranslation('translation');
+
+  return (
+    <VisitDataTable
+      endpoint="visits"
+      defaultFilter="brigadist"
+      headCells={headCells}
+      title={t('menu.visits')}
+      subtitle={t('menu.descriptions.visits')}
+      pageSize={15}
+    />
+  );
+}
diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx
index f76e596..5993078 100644
--- a/src/routes/AppRouter.tsx
+++ b/src/routes/AppRouter.tsx
@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Suspense } from 'react';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
 import BaseLayout from '../layout/BaseLayout';
 
 import MuiTheme from '../mui-theme';
@@ -31,6 +31,7 @@ import ProtectedRoute from './ProtectedRoute';
 import SitesPage from '@/pages/reports/SitesPage';
 import HeatMapPage from '@/pages/reports/HeatMapPage';
 import VisitPage from '@/pages/reports/VisitPage';
+import VisitsList from '@/pages/visits/VisitsPage';
 
 // Create a React Query client
 const queryClient = new QueryClient({
@@ -73,37 +74,41 @@ const router = createBrowserRouter([
     errorElement: <RouterErrorPage />,
   },
   {
-    path: 'sites',
+    path: 'visits',
     element: (
       <ProtectedRoute>
         <PageLayout>
-          <SitesPage />
+          <VisitsList />
         </PageLayout>
       </ProtectedRoute>
     ),
     errorElement: <RouterErrorPage />,
   },
   {
-    path: 'heat-map',
+    path: 'reports',
     element: (
       <ProtectedRoute>
         <PageLayout>
-          <HeatMapPage />
-        </PageLayout>
-      </ProtectedRoute>
-    ),
-    errorElement: <RouterErrorPage />,
-  },
-  {
-    path: 'visits',
-    element: (
-      <ProtectedRoute>
-        <PageLayout>
-          <VisitPage />
+          <Outlet />
         </PageLayout>
       </ProtectedRoute>
     ),
     errorElement: <RouterErrorPage />,
+    children: [
+      {
+        path: 'sites',
+        element: <SitesPage />,
+      },
+      {
+        path: 'heat-map',
+        element: <HeatMapPage />,
+      },
+      {
+        path: 'visits',
+        element: <VisitPage />,
+        errorElement: <RouterErrorPage />,
+      },
+    ],
   },
   {
     path: '/admin',
diff --git a/src/schemas/entities.ts b/src/schemas/entities.ts
index 7c14517..d1852fe 100644
--- a/src/schemas/entities.ts
+++ b/src/schemas/entities.ts
@@ -18,6 +18,17 @@ export interface BaseWithStatus extends BaseEntity {
 
 export interface Organization extends BaseWithStatus {}
 
+export interface Visit extends BaseEntity {
+  visitedAt: string;
+  city: string;
+  sector: string;
+  wedge: string;
+  house: number;
+  visitStatus: string | null;
+  brigadist: string;
+  team: string;
+}
+
 export interface SpecialPlace extends BaseWithStatus {}
 
 export interface Permission extends BaseEntity {
diff --git a/src/themed/table/DataTable.tsx b/src/themed/table/DataTable.tsx
index 3736a8a..cbde860 100644
--- a/src/themed/table/DataTable.tsx
+++ b/src/themed/table/DataTable.tsx
@@ -13,7 +13,7 @@ import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
 
-import { PAGE_SIZES } from '@/constants';
+import { PAGE_SIZES, PageSizes } from '@/constants';
 import { formatDateFromString } from '@/util';
 import useLangContext from '../../hooks/useLangContext';
 
@@ -166,6 +166,7 @@ export interface DataTableProps<T> {
   pagination?: HandlePagination;
   actions?: (row: T, isLoading?: boolean) => JSX.Element;
   isLoading?: boolean;
+  pageSize?: PageSizes;
 }
 
 export function DataTable<T>({
@@ -176,6 +177,7 @@ export function DataTable<T>({
   pagination,
   actions,
   isLoading,
+  pageSize = PAGE_SIZES[0],
 }: DataTableProps<T>) {
   const { t } = useTranslation('translation');
 
@@ -185,7 +187,7 @@ export function DataTable<T>({
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<Extract<keyof T, string> | undefined>();
   const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(PAGE_SIZES[0]);
+  const [rowsPerPage, setRowsPerPage] = React.useState(pageSize);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const renderValue = (row: T, headCell: HeadCell<T>): string | React.ReactNode => {

From 31120d41f6cd82f850abbd6ec432e5ddf353a9b9 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Fri, 29 Nov 2024 14:30:54 +0100
Subject: [PATCH 25/36] fix: typing

---
 src/themed/table/DataTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/themed/table/DataTable.tsx b/src/themed/table/DataTable.tsx
index cbde860..b7b4909 100644
--- a/src/themed/table/DataTable.tsx
+++ b/src/themed/table/DataTable.tsx
@@ -187,7 +187,7 @@ export function DataTable<T>({
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<Extract<keyof T, string> | undefined>();
   const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(pageSize);
+  const [rowsPerPage, setRowsPerPage] = React.useState<PageSizes>(pageSize);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const renderValue = (row: T, headCell: HeadCell<T>): string | React.ReactNode => {
@@ -241,7 +241,7 @@ export function DataTable<T>({
   };
 
   const onChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newRowsPerPage = parseInt(`${event.target.value}`, 10);
+    const newRowsPerPage = parseInt(`${event.target.value}`, 10) as PageSizes;
     setRowsPerPage(newRowsPerPage);
     setPage(0);
     pagination?.handleChangePage(0, newRowsPerPage);

From 81f515ba0d3f28be6f111085f86c578b9f6c341b Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Fri, 29 Nov 2024 14:48:27 +0100
Subject: [PATCH 26/36] feat: change sidebar community

---
 src/i18n/locales/en/translation.json | 2 +-
 src/i18n/locales/es/translation.json | 2 +-
 src/i18n/locales/pt/translation.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index f37bea9..aa34377 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -24,7 +24,7 @@
     "roles": "Roles",
     "specialPlaces": "Special Places",
     "myCity": "My City",
-    "myCommunity": "My Community",
+    "myCommunity": "My Community (Sector)",
     "teams": "Brigades",
     "myProfile": "My Profile",
     "settings": "Settings",
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index 52fc5ae..fde0ba0 100644
--- a/src/i18n/locales/es/translation.json
+++ b/src/i18n/locales/es/translation.json
@@ -23,7 +23,7 @@
     "roles": "Roles",
     "myCity": "Mi Ciudad",
     "specialPlaces": "Lugares Especiales",
-    "myCommunity": "Mi Comunidad",
+    "myCommunity": "Mi Comunidad (Sector)",
     "teams": "Brigadas",
     "myProfile": "Mi Perfil",
     "settings": "Configuraciones",
diff --git a/src/i18n/locales/pt/translation.json b/src/i18n/locales/pt/translation.json
index 024b9e1..b457538 100644
--- a/src/i18n/locales/pt/translation.json
+++ b/src/i18n/locales/pt/translation.json
@@ -23,7 +23,7 @@
     "roles": "Funções",
     "myCity": "Minha Cidade",
     "specialPlaces": "Lugares Especiais",
-    "myCommunity": "Minha Comunidade",
+    "myCommunity": "Minha Comunidade (Setor)",
     "teams": "Brigadas",
     "myProfile": "Meu Perfil",
     "settings": "Configurações",

From 5f8f3d3d8ac785d920a481871f9dc67c77f42abc Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Fri, 29 Nov 2024 15:01:18 +0100
Subject: [PATCH 27/36] fix: adjust styles

---
 src/components/CommentBox.tsx | 2 +-
 src/components/PostBox.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CommentBox.tsx b/src/components/CommentBox.tsx
index 69e14bf..828fe6e 100644
--- a/src/components/CommentBox.tsx
+++ b/src/components/CommentBox.tsx
@@ -55,7 +55,7 @@ const CommentBox = ({ postId }: CommentBoxProps) => {
 
           return (
             <Box>
-              <Box className="flex items-center gap-4 mt-6">
+              <Box className="flex grid gap-2 mt-6">
                 <Box className="min-w-20 min-h-20 -tracking-4 bg-green-100 rounded-full flex items-center justify-center">
                   <Text className="mb-0 text-green-800 font-bold -tracking-4 uppercase">{acronym}</Text>
                 </Box>
diff --git a/src/components/PostBox.tsx b/src/components/PostBox.tsx
index 427a1b8..bd84ece 100644
--- a/src/components/PostBox.tsx
+++ b/src/components/PostBox.tsx
@@ -28,9 +28,9 @@ const PostBox = ({ author, date, location, text, likes, image, id, comments, acr
   const [openComments, setOpenComments] = useState(false);
 
   return (
-    <Box key={id} className="flex-col border-solid border-neutral-100 rounded-md p-8 flex justify-between mb-4">
+    <Box key={id} className="flex-col border-solid border-neutral-100 rounded-md p-6 flex justify-between mb-4">
       <Box className="flex items-center gap-4 mb-6">
-        <Box className="w-20 h-20 -tracking-4 bg-green-100 rounded-full flex items-center justify-center">
+        <Box className="w-10 h-10 -tracking-4 bg-green-100 rounded-full flex items-center justify-center">
           <Text className="mb-0 text-green-800 font-bold -tracking-4 uppercase">{acronym}</Text>
         </Box>
         <Box>

From b513d0b6f3d499fa4e00e2311b42020aaab74495 Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Fri, 29 Nov 2024 15:23:14 +0100
Subject: [PATCH 28/36] feat: update my community page

---
 src/i18n/locales/en/feed.json              |  9 +++++++-
 src/i18n/locales/es/feed.json              |  9 +++++++-
 src/i18n/locales/pt/feed.json              |  9 +++++++-
 src/pages/my-community/MyCommunityPage.tsx | 25 ++++++++++++++--------
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/i18n/locales/en/feed.json b/src/i18n/locales/en/feed.json
index a904979..af9a6d6 100644
--- a/src/i18n/locales/en/feed.json
+++ b/src/i18n/locales/en/feed.json
@@ -1,5 +1,12 @@
 {
-  "community": "My community's progress",
+  "community": {
+    "title": "Statistical data",
+    "riskChart": {
+      "title": "Change in Dengue Risk in Your Community",
+      "description": "DengueChatPlus focuses its actions on identifying and eliminating water storage containers as well as barrels and drains. A location can be counted twice if it has both positive and potential breeding sites."
+    },
+    "postAndComments": "Posts and Comments"
+  },
   "city": "City of",
   "sitesReport": {
     "title": "Tariki Sites",
diff --git a/src/i18n/locales/es/feed.json b/src/i18n/locales/es/feed.json
index f4dda4c..a17e621 100644
--- a/src/i18n/locales/es/feed.json
+++ b/src/i18n/locales/es/feed.json
@@ -1,5 +1,12 @@
 {
-  "community": "El progreso de mi comunidad",
+  "community": {
+    "title": "Datos Estadísticos",
+    "riskChart": {
+      "title": "Cambio en Riesgo en Tu Comunidad de Dengue",
+      "description": "DengueChatPlus enfoca sus acciones en la identificación y eliminación de contenedores  de almacenamiento de agua como también de barriles y sumideros. Un lugar puede ser contado doble si tiene criaderos positivos y también potenciales."
+    },
+    "postAndComments": "Posts y Comentarios"
+  },
   "city": "Ciudad de",
   "sitesReport": {
     "title": "Sitios Tariki",
diff --git a/src/i18n/locales/pt/feed.json b/src/i18n/locales/pt/feed.json
index 8a039ee..fe13967 100644
--- a/src/i18n/locales/pt/feed.json
+++ b/src/i18n/locales/pt/feed.json
@@ -1,5 +1,12 @@
 {
-  "community": "O progresso da minha comunidade",
+  "community": {
+    "title": "Dados estatísticos",
+    "riskChart": {
+      "title": "Mudança no Risco de Dengue na Sua Comunidade",
+      "description": "O DengueChatPlus concentra suas ações na identificação e eliminação de recipientes de armazenamento de água, bem como barris e ralos. Um local pode ser contado duas vezes se tiver criadouros positivos e também potenciais."
+    },
+    "postAndComments": "Publicações e Comentários"
+  },
   "city": "Cidade de",
   "sitesReport": {
     "title": "Locais Tariki",
diff --git a/src/pages/my-community/MyCommunityPage.tsx b/src/pages/my-community/MyCommunityPage.tsx
index 2b69769..61d2ecf 100644
--- a/src/pages/my-community/MyCommunityPage.tsx
+++ b/src/pages/my-community/MyCommunityPage.tsx
@@ -10,19 +10,22 @@ import useUser from '@/hooks/useUser';
 import { Post, Team } from '@/schemas/entities';
 import Loader from '@/themed/loader/Loader';
 import Title from '@/themed/title/Title';
+import Text from '@/themed/text/Text';
 
 type Sort = 'asc' | 'desc';
 
 const LookerStudioEmbed = () => {
   return (
-    <iframe
-      title="Looker Studio Report"
-      width="100%"
-      height="700"
-      src="https://lookerstudio.google.com/embed/reporting/52ffa4b7-c386-4c77-b5c8-ad765c9f15cc/page/2hjKE"
-      className="border-0 p-0 h-min-max overscroll-none overflow-hidden"
-      sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-    />
+    <div>
+      <iframe
+        title="Looker Studio Report"
+        width="100%"
+        height="700"
+        src="https://lookerstudio.google.com/embed/reporting/52ffa4b7-c386-4c77-b5c8-ad765c9f15cc/page/2hjKE"
+        className="border-0 p-0 h-min-max overscroll-none overflow-hidden"
+        sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+      />
+    </div>
   );
 };
 
@@ -111,12 +114,16 @@ const MyCommunity = () => {
 
   return (
     <>
-      <Title type="page2" label={t('community')} />
+      <Title type="page2" label={t('community.title')} />
       <Divider />
       <Box className="flex pt-6 gap-6">
         <Box className="bg-gray-300 h-full w-full">
           <SitesReport />
+          <Title label={t('community.riskChart.title')} />
+          <Text>{t('community.riskChart.description')}</Text>
           <LookerStudioEmbed />
+          <Divider className="mt-12 mb-8" />
+          <Title label={t('community.postAndComments')} />
           <InfiniteScroll
             loader={<Loader />}
             hasMore={hasMore}

From d7cecbf75278899f490cb72c90138753dd14940e Mon Sep 17 00:00:00 2001
From: zant <gonzalochristobal@gmail.com>
Date: Fri, 29 Nov 2024 15:25:11 +0100
Subject: [PATCH 29/36] feat: add margin

---
 src/components/SitesReport.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SitesReport.tsx b/src/components/SitesReport.tsx
index 4cf0374..2b2d5a8 100644
--- a/src/components/SitesReport.tsx
+++ b/src/components/SitesReport.tsx
@@ -7,7 +7,7 @@ const SitesReport = () => {
   const { t } = useTranslation('feed');
 
   return (
-    <Box className="border-solid border-neutral-100 rounded-md p-6 mb-4">
+    <Box className="border-solid border-neutral-100 rounded-md p-6 mb-10">
       <Title label={t('sitesReport.title')} type="subsection" className="mb-0" />
       <Box className="flex flex-col mt-6">
         <>

From ffe14d4ab72fbd8f9351a1e84c0555f0ff60988c Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Wed, 4 Dec 2024 22:12:10 -0300
Subject: [PATCH 30/36] fix: change date format on tables

---
 src/util/index.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/util/index.ts b/src/util/index.ts
index dad49b4..a5f824e 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -24,18 +24,21 @@ export function getProperty(obj: any, propertyString: string): any {
 }
 
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
-  month: 'short', // Display month in short format
-  day: 'numeric', // Display day of the month
-  year: 'numeric', // Display full year
+  // month: 'short', // Display month in short format
+  // day: 'numeric', // Display day of the month
+  // year: 'numeric', // Display full year
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
 };
 
-export const formatDateFromString = (locale: string, date: string | null | undefined) => {
+export const formatDateFromString = (_locale: string, date: string | null | undefined) => {
   if (!date) {
     return '-';
   }
 
   const dateObj = new Date(date);
-  return dateObj.toLocaleDateString(locale, dateFormatOptions);
+  return dateObj.toLocaleDateString('zh-Hans-CN', dateFormatOptions);
 };
 
 export function a11yProps(index: number) {

From 932da84940119aeafd507dbc25605075ae730e78 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Thu, 5 Dec 2024 09:06:36 -0300
Subject: [PATCH 31/36] fix: use the real input name instead only  "name" in
 all filters

---
 src/components/list/CityList.tsx          | 2 +-
 src/components/list/FilteredDataTable.tsx | 7 ++++---
 src/components/list/OrganizationList.tsx  | 2 +-
 src/components/list/RoleList.tsx          | 2 +-
 src/components/list/SpecialPlacesList.tsx | 2 +-
 src/components/list/TeamsList.tsx         | 2 +-
 src/i18n/locales/es/translation.json      | 4 +++-
 7 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/list/CityList.tsx b/src/components/list/CityList.tsx
index 0b9bd38..c883a0b 100644
--- a/src/components/list/CityList.tsx
+++ b/src/components/list/CityList.tsx
@@ -22,7 +22,7 @@ const headCells: HeadCell<City>[] = [
   },
   {
     id: 'name',
-    label: 'name',
+    label: 'city',
     filterable: true,
     sortable: true,
   },
diff --git a/src/components/list/FilteredDataTable.tsx b/src/components/list/FilteredDataTable.tsx
index 2525121..c39adfc 100644
--- a/src/components/list/FilteredDataTable.tsx
+++ b/src/components/list/FilteredDataTable.tsx
@@ -61,7 +61,7 @@ export default function FilteredDataTable<T>({
   const [searchText, setSearchText] = useState('');
   const [searchSelect, setSearchSelect] = useState('');
   const [selectedOption, setSelectedOption] = useState(defaultFilter || '');
-  const options = headCells.filter((cell) => cell.filterable).map((cell) => cell.id);
+  const options = headCells.filter((cell) => cell.filterable).map((cell) => ({ value: cell.id, label: cell.label }));
   const filterOptions = useMemo(() => {
     const filterOptionsObject: FilterOptionsObject = {};
 
@@ -227,11 +227,12 @@ export default function FilteredDataTable<T>({
               <MenuItem disabled value="">
                 {t(`table.selectAttribute`)}
               </MenuItem>
+
               {options.map((option, index) => (
-                <MenuItem key={`${option}-${index}`} value={option}>
+                <MenuItem key={`${option.value}-${index}`} value={option.value}>
                   {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
                   {/* @ts-expect-error */}
-                  {t(`columns.${option}`)}
+                  {t(`columns.${option.label}`)}
                 </MenuItem>
               ))}
             </Select>
diff --git a/src/components/list/OrganizationList.tsx b/src/components/list/OrganizationList.tsx
index 265edd2..be422b4 100644
--- a/src/components/list/OrganizationList.tsx
+++ b/src/components/list/OrganizationList.tsx
@@ -11,7 +11,7 @@ const headCells: HeadCell<Organization>[] = [
   },
   {
     id: 'name',
-    label: 'name',
+    label: 'organization',
     filterable: true,
     sortable: true,
   },
diff --git a/src/components/list/RoleList.tsx b/src/components/list/RoleList.tsx
index c934f09..edaf5e0 100644
--- a/src/components/list/RoleList.tsx
+++ b/src/components/list/RoleList.tsx
@@ -18,7 +18,7 @@ const headCells: HeadCell<Role>[] = [
   },
   {
     id: 'name',
-    label: 'name',
+    label: 'rol',
     filterable: true,
     sortable: true,
   },
diff --git a/src/components/list/SpecialPlacesList.tsx b/src/components/list/SpecialPlacesList.tsx
index 67a3949..bcebf6e 100644
--- a/src/components/list/SpecialPlacesList.tsx
+++ b/src/components/list/SpecialPlacesList.tsx
@@ -12,7 +12,7 @@ const headCells: HeadCell<SpecialPlace>[] = [
   },
   {
     id: 'name',
-    label: 'name',
+    label: 'specialPlace',
     filterable: true,
     sortable: true,
   },
diff --git a/src/components/list/TeamsList.tsx b/src/components/list/TeamsList.tsx
index af3fedb..b18eda3 100644
--- a/src/components/list/TeamsList.tsx
+++ b/src/components/list/TeamsList.tsx
@@ -20,7 +20,7 @@ function headCells(isAdmin: boolean): HeadCell<Team>[] {
     },
     {
       id: 'name',
-      label: 'name',
+      label: 'team',
       sortable: true,
       filterable: true,
     },
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index fde0ba0..aab423a 100644
--- a/src/i18n/locales/es/translation.json
+++ b/src/i18n/locales/es/translation.json
@@ -93,7 +93,9 @@
     "visitStatus": "Estado de Visita",
     "visitedAt": "Visitado en",
     "team": "Brigada",
-    "house": "Sitio"
+    "house": "Sitio",
+    "rol": "Rol",
+    "specialPlace": "Lugar especial"
   },
   "options": {
     "notDefined": "No definido",

From 8f26095405da0c892099374c5723a2c67b436898 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Thu, 5 Dec 2024 09:19:20 -0300
Subject: [PATCH 32/36] fix: i change name to city name

---
 src/components/dialog/CreateCityDialog.tsx | 2 +-
 src/i18n/locales/es/admin.json             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/CreateCityDialog.tsx b/src/components/dialog/CreateCityDialog.tsx
index 6c389c4..03418ba 100644
--- a/src/components/dialog/CreateCityDialog.tsx
+++ b/src/components/dialog/CreateCityDialog.tsx
@@ -120,7 +120,7 @@ export function CreateCityDialog({ handleClose, updateTable }: CreateCityDialogP
               <FormInput
                 className="mt-2"
                 name="name"
-                label={t('admin:cities.form.name')}
+                label={t('admin:cities.form.name_placeholder')}
                 type="text"
                 placeholder={t('admin:cities.form.name_placeholder')}
               />
diff --git a/src/i18n/locales/es/admin.json b/src/i18n/locales/es/admin.json
index a252b44..a084ac5 100644
--- a/src/i18n/locales/es/admin.json
+++ b/src/i18n/locales/es/admin.json
@@ -18,7 +18,7 @@
     "neighborhoods": "Sectores",
     "form": {
       "name": "Nombre",
-      "name_placeholder": "Ingrese un nombre",
+      "name_placeholder": "Ingrese un el nombre de la ciudad",
       "neighborhood": "Sector",
       "neighborhood_placeholder": "Ingrese el nombre del sector",
       "add_button": "Añadir"

From 1a7bc6c733285c8d4dbdae28650d083fd52a875b Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Thu, 5 Dec 2024 09:54:51 -0300
Subject: [PATCH 33/36] fix: progress bar issue

---
 src/components/RiskChart.tsx            | 19 +++++++++++++++----
 src/themed/progress-bar/ProgressBar.tsx |  5 +++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/RiskChart.tsx b/src/components/RiskChart.tsx
index 876ae20..e7a0fd3 100644
--- a/src/components/RiskChart.tsx
+++ b/src/components/RiskChart.tsx
@@ -27,7 +27,7 @@ const RiskChart = () => {
   });
 
   const label = `${(user?.team as BaseObject)?.name}: ${t('riskChart.title')}`;
-
+  const totalQuantity = (data?.redQuantity || 0) + (data?.orangeQuantity || 0) + (data?.greenQuantity || 0);
   return (
     <Box className="border-solid border-neutral-100 rounded-md p-6 mb-4">
       <Title label={label} type="subsection" className="mb-0" />
@@ -35,13 +35,24 @@ const RiskChart = () => {
         {loading && <Loader />}
         {!loading && (
           <>
-            <ProgressBar label={t('riskChart.greenSites')} progress={data?.greenQuantity || 0} color="bg-green-600" />
+            <ProgressBar
+              label={t('riskChart.greenSites')}
+              value={data?.greenQuantity || 0}
+              progress={totalQuantity > 0 ? Math.round(((data?.greenQuantity || 0) / totalQuantity) * 100) : 0}
+              color="bg-green-600"
+            />
             <ProgressBar
               label={t('riskChart.yellowSites')}
-              progress={data?.orangeQuantity || 0}
+              value={data?.orangeQuantity || 0}
+              progress={totalQuantity > 0 ? Math.round(((data?.orangeQuantity || 0) / totalQuantity) * 100) : 0}
               color="bg-yellow-600"
             />
-            <ProgressBar label={t('riskChart.redSites')} progress={data?.redQuantity || 0} color="bg-red-600" />
+            <ProgressBar
+              label={t('riskChart.redSites')}
+              value={data?.redQuantity || 0}
+              progress={totalQuantity > 0 ? Math.round(((data?.redQuantity || 0) / totalQuantity) * 100) : 0}
+              color="bg-red-600"
+            />
           </>
         )}
       </Box>
diff --git a/src/themed/progress-bar/ProgressBar.tsx b/src/themed/progress-bar/ProgressBar.tsx
index 295d883..700522a 100644
--- a/src/themed/progress-bar/ProgressBar.tsx
+++ b/src/themed/progress-bar/ProgressBar.tsx
@@ -6,11 +6,12 @@ import Help from '@/assets/icons/help.svg';
 export interface ProgressBarProps {
   label: string;
   progress: number;
+  value: number;
   color: string;
   tooltip?: string;
 }
 
-export const ProgressBar: React.FC<ProgressBarProps> = ({ label, progress, color, tooltip }) => {
+export const ProgressBar: React.FC<ProgressBarProps> = ({ label, value, progress, color, tooltip }) => {
   return (
     <Box className="flex-col items-start mb-4">
       <Box className="flex flex-row justify-between">
@@ -22,7 +23,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({ label, progress, color
             </Tooltip>
           )}
         </Box>
-        <Text className="text-gray-800 font-medium ml-4">{progress}</Text>
+        <Text className="text-gray-800 font-medium ml-4">{value}</Text>
       </Box>
       <Box className="flex-row items-center">
         <Box className="relative w-11/12 rounded-full h-2" style={{ width: '100%' }}>

From c4ee58a38c2fa7b94f91bf858cb5ae6db360131f Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Thu, 5 Dec 2024 09:57:58 -0300
Subject: [PATCH 34/36] fix: progress bar issue

---
 src/components/SitesReport.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/SitesReport.tsx b/src/components/SitesReport.tsx
index 2b2d5a8..75c9786 100644
--- a/src/components/SitesReport.tsx
+++ b/src/components/SitesReport.tsx
@@ -13,12 +13,14 @@ const SitesReport = () => {
         <>
           <ProgressBar
             label={t('sitesReport.title')}
+            value={60}
             progress={60}
             color="bg-green-600"
             tooltip={t('sitesReport.tarikiSiteInfo')}
           />
           <ProgressBar
             label={t('sitesReport.quantity')}
+            value={80}
             progress={80}
             color="bg-green-800"
             tooltip={t('sitesReport.greenContainersInfo')}

From e82593a4978bc42bfb549117c11b2ab8c4a3e0e0 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Fri, 6 Dec 2024 16:45:35 -0300
Subject: [PATCH 35/36] fix: update the risk chart url in my community page

---
 src/pages/my-community/MyCommunityPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/my-community/MyCommunityPage.tsx b/src/pages/my-community/MyCommunityPage.tsx
index 61d2ecf..b0c951a 100644
--- a/src/pages/my-community/MyCommunityPage.tsx
+++ b/src/pages/my-community/MyCommunityPage.tsx
@@ -21,7 +21,7 @@ const LookerStudioEmbed = () => {
         title="Looker Studio Report"
         width="100%"
         height="700"
-        src="https://lookerstudio.google.com/embed/reporting/52ffa4b7-c386-4c77-b5c8-ad765c9f15cc/page/2hjKE"
+        src="https://lookerstudio.google.com/embed/reporting/51c9e940-d10f-458f-8cbb-8a40804404a1/page/P6GUE"
         className="border-0 p-0 h-min-max overscroll-none overflow-hidden"
         sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
       />

From be013ad5943bc3878510a1eba52910fbcbfd1de2 Mon Sep 17 00:00:00 2001
From: Raul Ferreira G <ferreirarauldev@gmail.com>
Date: Fri, 6 Dec 2024 19:04:01 -0300
Subject: [PATCH 36/36] fix: add headers source to risk chart

---
 src/components/RiskChart.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/RiskChart.tsx b/src/components/RiskChart.tsx
index e7a0fd3..01081e9 100644
--- a/src/components/RiskChart.tsx
+++ b/src/components/RiskChart.tsx
@@ -24,6 +24,9 @@ const RiskChart = () => {
 
   const [{ data, loading }] = useAxios<HouseReport, null, ErrorResponse>({
     url: `reports/house_status`,
+    headers: {
+      source: 'visits',
+    },
   });
 
   const label = `${(user?.team as BaseObject)?.name}: ${t('riskChart.title')}`;