Merge pull request #43 from socialappslab/feat/51/brigadiers-ranking

feat: My City View

package.json

@@ -22,7 +22,7 @@
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.1",
-    "@tanstack/react-query": "^5.48.0",
+    "@tanstack/react-query": "^5.59.16",
     "axios": "^1.7.2",
     "axios-auth-refresh": "^3.3.6",
     "axios-hooks": "^5.0.2",
@@ -41,6 +41,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.0",
     "react-i18next": "^14.1.2",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-number-format": "^5.4.0",
     "react-router-dom": "^6.24.0",
     "tailwind-merge": "^2.3.0",

src/components/icon/index.tsx

@@ -8,6 +8,9 @@ import Success from '@/assets/icons/success.svg?react';
 import Verified from '@/assets/icons/verified.svg?react';
 import Hello from '@/assets/icons/hello.svg?react';
 import City from '@/assets/icons/city.svg?react';
+import Comment from '@/assets/icons/comment.svg?react';
+import Trash from '@/assets/icons/trash.svg?react';
+import ThumbsUp from '@/assets/icons/thumbs-up.svg';
 import Community from '@/assets/icons/community.svg?react';
 import Data from '@/assets/icons/data.svg?react';
 import Register from '@/assets/icons/register.svg?react';
@@ -23,6 +26,9 @@ const IconMap = {
   Data,
   Register,
   Export,
+  Comment,
+  Trash,
+  ThumbsUp,
 };
 
 const Icon = ({

src/constants/index.ts

@@ -1,14 +1,15 @@
 export const COLORS: { [key: string]: string | { [key: string | number]: string } } = {
   grass: '#067507',
-  green: { 100: '#D6FFD6', 600: '#04BF00' },
+  green: { 100: '#D6FFD6', 600: '#04BF00', 800: '#067507' },
   background: '#FFFFFF',
   darkest: '#1C1917',
   gray: '#4D4D54',
   neutral: { 50: '#FAFAF9', 100: '#F5F5F4', 300: '#D7D3D0' },
   softGray: '#C4C4C4',
   lightGray: '#EEEEEE',
   secondary: '#FCC914',
-  red: '#d32f2f',
+  red: { 100: '#FC0606', 600: '#FC0606' },
+  yellow: { 100: '#FC0606', 600: '#FCC914' },
   darkGreen: '#17736B',
   fieldBorder: '#DADADA',
   white: '#FFFFFF',

src/i18n/locales/en/myCity.json

@@ -0,0 +1,27 @@
+{
+  "title": "City of",
+  "layout": {
+    "filters": "Filters",
+    "filter": {
+      "order": "Order by",
+      "moreRecent": "More recent"
+    }
+  },
+  "post": {
+    "comment": "Comment",
+    "likes": "Likes",
+    "delete": "Borrar"
+  },
+  "rankView": {
+    "ranking": "Ranking",
+    "users": "Users",
+    "greenHouses": "Green Houses",
+    "visits": "Visits"
+  },
+  "riskChart": {
+    "title": "Risk Chart",
+    "greenSites": "Green sites",
+    "yellowSites": "Yellow sites",
+    "redSites": "Red sites"
+  }
+}

src/i18n/locales/es/myCity.json

@@ -0,0 +1,27 @@
+{
+  "title": "Ciudad de",
+  "layout": {
+    "filters": "Filtros",
+    "filter": {
+      "order": "Ordenar por",
+      "moreRecent": "Más reciente"
+    }
+  },
+  "post": {
+    "comment": "Comentar",
+    "likes": "Me gusta",
+    "delete": "Delete"
+  },
+  "rankView": {
+    "ranking": "Ranking",
+    "users": "Usuarios",
+    "greenHouses": "Casas verdes",
+    "visits": "Visitas"
+  },
+  "riskChart": {
+    "title": "Gráfico de riesgo",
+    "greenSites": "Sitios verdes",
+    "yellowSites": "Sitios amarillos",
+    "redSites": "Sitios rojos"
+  }
+}

src/i18n/locales/pt/myCity.json

@@ -0,0 +1,27 @@
+{
+  "title": "Cidade de",
+  "layout": {
+    "filters": "Filtros",
+    "filter": {
+      "order": "Ordenar por",
+      "moreRecent": "Mais recente"
+    }
+  },
+  "post": {
+    "comment": "Comentar",
+    "likes": "Curtidas",
+    "delete": "Excluir"
+  },
+  "rankView": {
+    "ranking": "Classificação",
+    "users": "Usuários",
+    "greenHouses": "Estufas",
+    "visits": "Visitas"
+  },
+  "riskChart": {
+    "title": "Gráfico de risco",
+    "greenSites": "Locais verdes",
+    "yellowSites": "Locais amarelos",
+    "redSites": "Locais vermelhos"
+  }
+}

src/layout/AppBar.tsx

@@ -58,6 +58,8 @@ const ADMIN_CITIES = '/admin/cities';
 const ADMIN_SPECIAL_PLACES = '/admin/special-places';
 const ADMIN_TEAMS = '/admin/teams';
 
+const MY_CITY = '/my-city';
+
 export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
   const { t } = useTranslation('translation');
   const location = useLocation();
@@ -118,7 +120,7 @@ export function AppBar({ auth = false, signUp = false, logout }: AppBarProps) {
           </Box>
         }
       >
-        <ListItemButton>
+        <ListItemButton component={Link} to={MY_CITY} selected={pathname.includes(MY_CITY)}>
           <ListItemIcon>
             <Icon type="City" />
           </ListItemIcon>

src/layout/BaseLayout.tsx

@@ -29,7 +29,7 @@ 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 sx={{ height: '80px' }} />
+        <Toolbar disableGutters />
         {children}
       </Box>
     </Box>